vue3에서 WeChat 스캔 코드 로그인을 구현하고 개인 정보를 얻는 방법
- WBOY앞으로
- 2023-05-15 23:04:043241검색
1. 프로세스:
WeChat은 다음과 같은 두 가지 코드 스캔 방법을 제공합니다.
QR 코드 스캔 페이지로 이동
내장된 QR 코드
문서에 따라 알 수 있습니다. 스캔 코드 인증 모델은 다음과 같습니다.
1. 제3자가 WeChat 인증 로그인 요청을 시작합니다. WeChat 사용자가 제3자 애플리케이션 인증을 허용한 후 WeChat은 애플리케이션을 실행하거나 제3자 웹사이트로 리디렉션합니다. 인증 임시 티켓 코드 매개변수
2. API를 통해 access_token을 교환하려면 코드 매개변수와 AppSecret을 사용하세요.
3. 사용자의 기본 데이터 리소스를 얻거나 도움을 받으려면 사용자는 기본 작업을 구현합니다.
2. 전제조건:
WeChat 개발 공식 웹사이트 애플리케이션:
appid: ‘’, // 백엔드에서 제공
redirect_uri: ‘’, // 백엔드에서 제공
AppSecret // 제공 백엔드
3. 특정 로그인 구현
구현 방법 1:
vue 플러그인 사용:
// 安装
npm install vue-wxlogin --save-dev
// js引入
import wxlogin from 'vue-wxlogin'
components: { wxlogin }사용:
<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', // 后端提供결과: 이렇게 하면 작성한 웹페이지에 WeChat QR 코드가 표시됩니다.
스캔 후 페이지 URL은 코드를 얻을 수 있는 코드와 함께 주소를 제공합니다
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:
이를 자신의 웹페이지
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 .Callback
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. 모니터링 주소에 코드가 존재하는지
로그인 페이지 모니터링이 WeChat 인증 반환 코드 값을 얻었는지 여부, 존재하는 경우 백엔드에서 제공하는 인터페이스를 호출하여 코드를 백엔드에 반환합니다.
6. 백엔드에서 반환된 자격 증명
방법 3: 백엔드를 결합하여 QR 코드 획득
1. WeChat 로그인 QR 코드를 표시하는 데 사용되는 div 추가
<div id="weixin"></div>
2를 추가하고 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 로그인 성공 후 이동할 페이지
- 3. QR 코드
QR 코드를 스캔하여 로그인하고 로그인 확인 버튼을 클릭하면 브라우저가 자동으로 다음으로 이동합니다.
http://domain/weixinlogin?code=02147Yff12Yhgz0ArCef1qabgf147Yf0&state=undefine
이 코드는 WeChat이 사용자에게 보낸 임시 토큰입니다. access_token(공식 토큰)을 얻기 위해 코드에 따라 WeChat 타사 로그인 인터페이스를 다시 요청할 수 있습니다
3. access_token 얻기
3.1, API 소개
다른 인터페이스 호출을 위해 코드를 통해 access_token 얻기
1. 설명(다음 인터페이스 Get access_token을 통해)
HTTP 요청 방법: GETURL: 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
API
1. 인터페이스 설명
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를 얻은 후 다시 인터페이스를 요청하고 닉네임과 아바타를 가져와 쿠키에 저장합니다
<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!