uniapp が h5 WeChat 認証ログインを開発
記事ディレクトリ
序文
私も h5 認証 WeChat ログインを行うのは初めてで、ネットで長い間検索したところ、方法は基本的に同じであることがわかりましたが、私のプロセスには適していませんでした。
公開アカウントの公式ドキュメント: https://developers.weixin.qq.com/doc/offiaccount/Getting_Started/Overview.html
ほとんどの情報については、記事を参照してください: https://blog.csdn.net /anjignren/article/details/ 126176449
さらに詳しく知りたい場合は、このブロガーの記事を読むことができます。非常に詳細だと思います: https://www.cnblogs.com/0201zcr/p/5131602.html
実装手順:
1. ユーザーは WeChat の公開アカウントをフォローします。
2. WeChat パブリック アカウントは、ユーザー リクエスト認証ページの URL を提供します。
3．ユーザーが認証ページの URL をクリックすると、サーバーに対してリクエストが行われます。
4. サーバーは、WeChat パブリック アカウントを承認することに同意するかどうかをユーザーに尋ねます (スコープが snsapi_base の場合、この手順は必要ありません)。
5. ユーザーの同意 (スコープが snsapi_base の場合、そのようなステップはありません)
6．サーバーはコールバックを通じてコードを WeChat 公開アカウントに渡します
7。WeChat 公開アカウントがコードを取得
8. WeChat パブリック アカウントは CODE を通じてサーバーにアクセス トークンを要求します
9. サーバーはアクセス トークンと OpenID を WeChat 公開アカウントに返します
10．WeChat パブリック アカウントは、アクセス トークンを介してサーバーにユーザー情報を要求します (スコープが snsapi_base の場合、この手順は必要ありません)
11. サーバーはユーザー情報を WeChat パブリック アカウントに返します (スコープが snsapi_base の場合、この手順は必要ありません)。
1. 早めの準備 – テストアカウントを申請する
微信扫一扫进去之后的页面，可以把测试账号的信息保存下来，接下来会使用到。
翻到底下，扫码关注
接下来，选择公众号网页项目，
输入地址测试
测试地址 这样获取
公式 Web サイトを確認できます: https://uniapp.dcloud.net.cn/collocation/manifest.html#h5-template
1. ルート ディレクトリに新しい template.h5.html ファイルを作成し、直接コピーして貼り付けます (私の個人的な経験によると、私はそれを持っていません）中古）
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
<!-- Open Graph data -->
<!-- <meta property="og:title" content="Title Here" /> -->
<!-- <meta property="og:url" content="http://www.example.com/" /> -->
<!-- <meta property="og:image" content="http://example.com/image.jpg" /> -->
<!-- <meta property="og:description" content="Description Here" /> -->
<script>
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')
</script>
<link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />
</head>
<body>
<noscript>
<strong>Please enable JavaScript to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
2.mainifest.jsonを構成する
3. ブラウザで実行した後、アドレスをコピーし、WeChat 開発者ツールで使用します。
テスト中はこれを行うことができますが、正式に使用する場合は、これらを使用する必要はまったくありません。appID バックエンドによって提供されます (個々の企業によって異なります)。
2. 正式な開発 – フロントエンドコード
uniapp プロジェクトに新しいログイン認証ページを作成し、コードの記述を開始します。あなたのプロセスが私のプロセスと同じである場合、コードは次のとおりです。これを取得して直接使用でき、インターフェイスを変更するだけです。
需要注意的是code只有使用一次，不能重复使用，在开发的过程中可能会遇到这种问题，导致流程走不通
<template>
<view></view>
</template>
<script>
// h5 使用控制台打log 得先npm install vconsole
import Vconsole from 'vconsole';
export default {
data() {
return {
code:'',
state:''
}
},
onLoad() {
let vConsole = new Vconsole();
this.state = this.getUrlCode('state')
this.checkWeChatCode(this.code)
},
methods: {
checkWeChatCode() {
// 页面一进来先判断是否有code
this.code = this.getUrlCode('code')
if (this.code) {
// 如果有，走登记接口
this.getLogin(this.code)
} else {
// 没有调后端接口获取地址
let params = {
url:window.location.href,//当前页面的详细地址
state:this.state,
authType:0
}
xxxx(params).then(res => {
if(res.data.code == 0){
window.location.href = res.data.message
}else {
this.$u.toast(res.data.message)
}
})
// 根据需求使用 this.getCode()
}
},
getUrlCode (name) {
return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ''])[1].replace(/\+/g, '%20')) || null
},
// 获取code
// getCode () {
// window.location.href =
// 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + this.appID +
// '&redirect_uri=' + encodeURIComponent(this.callBack) +
// '&response_type=code&scope=snsapi_userinfo&state=' + this.state + '#wechat_redirect';
// redirect_uri是授权成功后，跳转的url地址，微信会帮我们跳转到该链接，并且通过？的形式拼接code，这里需要用encodeURIComponent对链接进行处理。
// 如果配置参数一一对应，那么此时已经通过回调地址刷新页面后，你就会再地址栏中看到code了。
// https://test.yuruantong.com/pages/loginAndRegister/login/loginH5?code=0312nn200ADR1P1BYh100zp2VL32nn2f&state=1
// },
//登录
async getLogin(value){
let params = {
code:value,
wechartState:this.state
}
const res = await xxxx(params)
if(res.data.code != 0){
this.$u.toast(res.data.message)
return;
}
if(res.data.rows[0].code == 1){
let obj = res.data.rows;
obj.push({
wechartState:this.state
})
let arr = {
params:obj,
isShow:true
}
uni.redirectTo({
url: '/pages/loginAndRegister/login/login?params=' + JSON.stringify(arr)
})
}else if(res.data.rows[0].code == 2){
//res.data.rows 返回的是token 跳转对应的页面
uni.setStorageSync('userInfo',res.data.rows[0].loginUserVO);
uni.redirectTo({
url:'/landlord/home/index/index'
})
}else{
}
}
}
}
</script>
<style>
</style>
上記は私の具体的な使用プロセスですが、個人的にテストした結果、効果がありました。
3. パッケージ化とリリース
1.公式サイトアドレス：https://hellouniapp.dcloud.net.cn
2. 赤枠で囲ったものを選択します
- ポップアップボックスが表示されるので、Webサイトのドメイン名を入力します。
4. その後、パッケージ化が成功し、アンパッケージ ディレクトリに保存され、展開のためにバックエンドに渡されます。
要約する
初めてやったときは、とても混乱しました。どうやって始めればよいのかわかりませんでした。Baidu で夢中になり、同様の実装方法をすべて調べました。その結果、ここで得たプロセスは間違っており、いくつかの実装方法が間違っていました。それらは私には本当に必要ありませんでした。そこで今回は、やり方がわからないからこそ、他の人の書いたものを読むことが自分の考えを束縛しているのではないかと感じ、それが私がすべきことだと感じました。
参考にしていただければと思いますし、個人的なテストにも有効だと思います。