ホームページ >ウェブフロントエンド >Vue.js >vue3でWeChatスキャンコードログインを実装して個人情報を取得する方法
vue3でWeChatスキャンコードログインを実装して個人情報を取得する方法
- WBOY転載
- 2023-05-15 23:04:043282ブラウズ
1. プロセス:
WeChat は、次の 2 つのコード スキャン方法を提供します:
QR コード スキャン ページにジャンプします
埋め込み QR コード
ドキュメントによると、コード認証モードのスキャン全体のプロセスは次のとおりであることがわかります:
1. サードパーティによる開始WeChat 承認済みログイン リクエスト。WeChat ユーザーがサードパーティ アプリケーションの承認を許可すると、WeChat はアプリケーションを起動するか、サードパーティ Web サイトにリダイレクトし、承認一時チケット コード パラメータをもたらします;
2. 追加コード パラメータ AppID や AppSecret などは、API を通じて access_token と交換されます;
3. access_token を通じてインターフェイス呼び出しを行い、ユーザーの基本データ リソースを取得したり、ユーザーが基本操作を実装できるようにします。
2. 前提条件:
WeChat 開発公式 Web サイト アプリケーション:
appid: ‘’, // バックエンドが提供する
redirect_uri: &lsquo ;&rsquo ;, // バックエンドは
AppSecret を提供します // バックエンドは
3 を提供します。特定のログイン実装
実装方法 1:
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()
}コードをバックエンドに与えると、バックエンドがこの人物に関する情報を返します
方法 2:
独自の 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>2. Mounted を追加し、導入しますWeChat ログイン QR コード JS
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" }
]
}
- appid: アプリケーションの一意の識別子
- scope: アプリケーションの承認は # に基づいて行われます。
- redirect_uri: コールバック アドレス、WeChat ログイン成功後にジャンプするページ
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"
}3.2 次の vue フロントエンド呼び出しJava バックエンド コード 1. axios を通じてノード サービスを呼び出し、新しいファイル @/api/weixin.js を作成します (これは、インターフェイスが統合され、API ファイルの下に個別に保存されているためです) import axios from 'axios'
export function getAccessToken(code) {
return axios.get(`http://localhost:8888?operation=token&code=$[code]`)
}2. ツール utils/param.js を追加します (ブラウザーのアドレス バー パラメーター コードを取得するために使用されます)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;
}3. weixinLogin.vue<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>4 を作成します。 WeChat にログインし、WeChat でユーザーのアバターとニックネームを取得します。API1. インターフェイスの説明
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 サイトの他の関連記事を参照してください。