WeChat は、次の 2 つのコード スキャン方法を提供します:
QR コード スキャン ページにジャンプします
埋め込み QR コード
ドキュメントによると、コード認証モードのスキャン全体のプロセスは次のとおりであることがわかります:
1. サードパーティによる開始WeChat 承認済みログイン リクエスト。WeChat ユーザーがサードパーティ アプリケーションの承認を許可すると、WeChat はアプリケーションを起動するか、サードパーティ Web サイトにリダイレクトし、承認一時チケット コード パラメータをもたらします;
2. 追加コード パラメータ AppID や AppSecret などは、API を通じて access_token と交換されます;
3. access_token を通じてインターフェイス呼び出しを行い、ユーザーの基本データ リソースを取得したり、ユーザーが基本操作を実装できるようにします。
WeChat 開発公式 Web サイト アプリケーション:
appid: ‘’, // バックエンドが提供する
redirect_uri: &lsquo ;&rsquo ;, // バックエンドは
AppSecret を提供します // バックエンドは
Use vue Plug- in:
// 安装
npm install vue-wxlogin --save-dev
// js引入
import wxlogin from 'vue-wxlogin'
components: { wxlogin }Usage:
<wxlogin
:appid="appid"
:scope="'snsapi_login'" // 网页固定的
:theme="'black'"
:redirect_uri="redirect_uri"
:href='bast64css'
>
</wxlogin>
// data
<wxlogin
:appid="appid"
:scope="'snsapi_login'" // 网页固定的
:theme="'black'"
:redirect_uri="redirect_uri"
:href='bast64css'
>
</wxlogin>
// data
bast64css: 'data:text/css;base64,LmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDIwMHB4O2hlaWdodDoyMDBweH0NCi5pbXBvd2VyQm94IC5pbmZvIHt3aWR0aDogMjAwcHh9DQouc3RhdHVzX2ljb24ge2Rpc3BsYXk6IG5vbmV9DQouaW1wb3dlckJveCAuc3RhdHVzIHt0ZXh0LWFsaWduOiBjZW50ZXI7fQ0KLmltcG93ZXJCb3ggLnRpdGxlIHtkaXNwbGF5OiBub25lfQ0KaWZyYW1lIHtoZWlnaHQ6IDMyMnB4O30NCg==',
appid: 'wx64914809da50', // 后端提供
redirect_uri: 'http%3A%2F%2Flant.com', // 后端提供Result: このようにして、WeChat QR コードがあなたが書いた Web ページに表示されます
スキャン後、ページにはコード アドレスがあり、コードを取得します
if (window.location.href.indexOf('code') >= 0) {
let code = window.location.href.split('?')[1];
code = code.substring(5, code.indexOf('&'));
this.wechatcode = code
this.wechatLogin()
}コードをバックエンドに与えると、バックエンドがこの人物に関する情報を返します
独自の Web ページに統合します
1. まず、vue ページに WeChat ログイン ボタンを追加します:
<!--微信授权登录按钮--> <img src="@/assets/images/weixin.png" /><a type="text" @click="handLoginByWx">微信扫码登录</a>
2. ログイン関連のパラメータを設定し、WeChat ログイン QR コード認証ページに移動します
// 跳转微信登录二维码授权页面
handLoginByWx() {
// 重定向地址重定到当前页面，在路径获取code
const hrefUrl = window.location.href
// 判断是否已存在code
if (!this.code) {
// 不存在，配置相关微信登录参数（主要是授权页面地址，appID，回调地址）
window.location.href = `
https://open.weixin.qq.com/connect/qrconnect
?appid=APPID
&redirect_uri=${encodeURIComponent(hrefUrl)}
&response_type=code
&scope=snsapi_login
`
}
}3. QR コードをスキャンして認証を確認します
携帯電話で QR コードをスキャンして認証を確認します
4. コールバック
そこからVue 上のルーティングガードである場合、コールバックで返されたコード値を取得 ルーティングガード内で処理
// 为微信授权登录重定向地址服务
var temp = (to.path).split('&')
var pram = temp[1]
var item = pram.split('=')
var code = item[1]
// 重定向到微信登录页面并且将code值带上
next({
path: '/login',
query: { 'code': code }
})5. ログインページ監視アドレスの有無 code
ログインページ監視アドレスが存在するかどうかWeChat 認証によって返されるコード値を取得するには (存在する場合)、バックエンドによって提供されるインターフェイスを呼び出します。コードはバックエンドに返されます##6。ログイン インターフェイスを呼び出して、バックエンドによって返される資格情報に基づいてログインします
<div id="weixin"></div>
mounted() {
var obj = new WxLogin({
id: "weixin",
appid: "wx3bdb1192c22883f3",
scope: "snsapi_login",
// 扫码成功后 跳转的地址
redirect_uri: "http://domain/weixinlogin"
});
},
head: {
script: [
{ src: "http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js" }
]
}http://domain /weixinlogin?code=02147Yff12Yhgz0ArCef1qabgf147Yf0&state=unknownこのコードはWeChat によってユーザーに送信される一時的なトークン。 access_token (公式トークン) を取得するためのコードに従って、WeChat サードパーティのログイン インターフェイスを再度リクエストできます。3. access_token を取得します3.1. API の概要access_token を取得します他の目的のコードを介してインターフェイス呼び出し1. インターフェイスの説明 (次のインターフェイスを通じて access_token を取得します)
HTTP リクエスト メソッド: GET次のパラメータを返します:URL: https://api. weixin.qq.com/ sns/oauth3/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
{
"access_token":"ACCESS_TOKEN",
"expires_in":7200,
"refresh_token":"REFRESH_TOKEN",
"openid":"OPENID",
"scope":"SCOPE"
}import axios from 'axios'
export function getAccessToken(code) {
return axios.get(`http://localhost:8888?operation=token&code=$[code]`)
}export function getUrlParam(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if(r != null) return unescape(r[2]);
return null;
}<template>
<div></div>
</template>
<script>
import { getUrlParam } from '@/utils/param'
import { getAccessToken } from '@/api/weixin'
export default {
mounted(){
let code=getUrlParam('code')
if(code!==null){//如果是微信登陆
//根据code获取access_token
getAccessToken(code).then( res=>{
let access_token= res.data.access_token
let openid= res.data.openid
console.log('access_token:'+access_token+ 'openid:'+openid)
})
}
}
}
</script>HTTP リクエスト メソッド: GETURL: https ://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID
#戻りパラメータ:
{
“openid”:“OPENID”,
“nickname”:“NICKNAME”,
“sex”:1,
“province”:“PROVINCE”,
“city”:“CITY”,
“country”:“COUNTRY”,
“headimgurl”: “http://wx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/0”,
“privilege”:[
“PRIVILEGE1”,
“PRIVILEGE2”
],
“unionid”: " o6_bmasdasdsad6_2sgVt7hMZOPfL" }access_token と openid を取得した後、インターフェースを再度リクエストします、ニックネームとアバターを取得し、Cookie に保存します。
<template>
<div></div>
</template>
<script>
import { getUrlParam } from '@/utils/param'
import { getAccessToken } from '@/api/weixin'
import { setUser } from '@/utils/auth'
export default {
mounted(){
let code=getUrlParam('code')
if(code!==null){//如果是微信登陆
//根据code获取access_token
getAccessToken(code).then( res=>{
let access_token= res.data.access_token
let openid= res.data.openid
weixin.getUserinfo( access_token, openid ).then( res => {
//提取用户昵称和头像
let nickname= res.data.nickname
let headimgurl= res.data.headimgurl
// 将用户信息保存到token中
setUser(access_token,nickname,headimgurl)
location.href='/' //跳转到首页
})
})
}
}
}
</script>この時点で、getUser は現在のログインであるユーザーのユーザー名とアバターを取得します。
以上がvue3でWeChatスキャンコードログインを実装して個人情報を取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
