1、WXBizDataCrypt.js-下載地址??

2、UNIAPP代碼

<template>
?? ?<view class="work-container">
?? ??? ?<view class="login">
?? ??? ??? ?<view class="content">
?? ??? ??? ??? ?<button class="button_wx" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
?? ??? ??? ??? ??? ?<u-icon name="weixin-fill" color="#FFFFFF" size="50"></u-icon>
?? ??? ??? ??? ??? ?<text class="button_text">授 權(quán) 登 錄</text>
?? ??? ??? ??? ?</button>
?? ??? ??? ?</view>
?? ??? ?</view>
?? ?</view>
</template>

<script>
import WXBizDataCrypt from "@/utils/WXBizDataCrypt.js";//必要解密js
?? ?let that;
?? ?export default {
?? ??? ?data() {
?? ??? ??? ?return {
?? ??? ??? ??? ?appid: '',//必要
?? ??? ??? ??? ?secret: '',//必要
?? ??? ??? ??? ?code: '',//臨時登錄憑證
?? ??? ??? ?};
?? ??? ?},
?? ??? ?mounted() {
?? ??? ??? ?that = this;
?? ??? ??? ?that.isLogin();
?? ??? ??? ?that.getWxCode();
?? ??? ?},
?? ??? ?methods: {
?? ??? ??? ?isLogin() {
?? ??? ??? ??? ?try {
?? ??? ??? ??? ??? ?const phoneNumber = uni.getStorageSync('phoneNumber');
?? ??? ??? ??? ??? ?if (phoneNumber) {//自動登錄
?? ??? ??? ??? ??? ??? ?// 業(yè)務登錄方法
?
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?} catch (e) {
?? ??? ??? ??? ??? ?// error
?? ??? ??? ??? ?}
?? ??? ??? ?},
?? ??? ??? ?// 獲取臨時登錄憑證
?? ??? ??? ?getWxCode() {
?? ??? ??? ??? ?wx.login({
?? ??? ??? ??? ??? ?success: res => {
?? ??? ??? ??? ??? ??? ?console.log('獲取用戶臨時登錄憑證code：', res.code);
?? ??? ??? ??? ??? ??? ?that.code = res.code;
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?})
?? ??? ??? ?},
?? ??? ??? ?// 獲取手機號的回調(diào)函數(shù)
?? ??? ??? ?getPhoneNumber(e) {
?? ??? ??? ??? ?const {
?? ??? ??? ??? ??? ?errMsg,
?? ??? ??? ??? ??? ?encryptedData,
?? ??? ??? ??? ??? ?iv
?? ??? ??? ??? ?} = e.detail;
?? ??? ??? ??? ?if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {
?? ??? ??? ??? ??? ?console.log('用戶拒絕授權(quán)=>');
?? ??? ??? ??? ?} else {
?? ??? ??? ??? ??? ?console.log('用戶同意授權(quán)=>', errMsg);
?? ??? ??? ??? ??? ?console.log('用戶手機號加密數(shù)據(jù)：', e.detail.encryptedData);
?? ??? ??? ??? ??? ?console.log('加密算法的初始向量：', iv);
?? ??? ??? ??? ??? ?console.log('開始校驗登錄憑證code=>');
?? ??? ??? ??? ??? ?//登錄憑證校驗,返回用戶唯一標識、會話密鑰
?? ??? ??? ??? ??? ?uni.request({
?? ??? ??? ??? ??? ??? ?url: 'https://api.weixin.qq.com/sns/jscode2session',//微信登錄憑證校驗接口
?? ??? ??? ??? ??? ??? ?data: {
?? ??? ??? ??? ??? ??? ??? ?appid: that.appid,
?? ??? ??? ??? ??? ??? ??? ?secret: that.secret,
?? ??? ??? ??? ??? ??? ??? ?js_code: that.code,
?? ??? ??? ??? ??? ??? ??? ?grant_type: 'authorization_code'
?? ??? ??? ??? ??? ??? ?},
?? ??? ??? ??? ??? ??? ?success(sessionRes) {
?? ??? ??? ??? ??? ??? ??? ?console.log('登錄憑證code校驗成功=>');
?? ??? ??? ??? ??? ??? ??? ?const {
?? ??? ??? ??? ??? ??? ??? ??? ?openid,
?? ??? ??? ??? ??? ??? ??? ??? ?session_key
?? ??? ??? ??? ??? ??? ??? ?} = sessionRes.data;
?? ??? ??? ??? ??? ??? ??? ?console.log('用戶唯一標識：', openid);
?? ??? ??? ??? ??? ??? ??? ?console.log('會話密鑰：', session_key);
?? ??? ??? ??? ??? ??? ??? ?console.log('開始解密用戶手機號=>');
?? ??? ??? ??? ??? ??? ??? ?var pc = new WXBizDataCrypt(that.appid, session_key);
? ? ? ? ? ? ? ? ? ? ? ? ? ? //解密用戶數(shù)據(jù)
?? ??? ??? ??? ??? ??? ??? ?var data = pc.decryptData(encryptedData, iv);
?? ??? ??? ??? ??? ??? ??? ?if (data) {
?? ??? ??? ??? ??? ??? ??? ??? ?console.log('用戶手機號解密成功: ', data.phoneNumber);
?? ??? ??? ??? ??? ??? ??? ??? ?uni.setStorageSync("phoneNumber", data.phoneNumber);
?? ??? ??? ??? ??? ??? ??? ??? ?// 業(yè)務登錄方法
?? ??? ??? ??? ??? ??? ??? ??? ?// that.startLogin(data.phoneNumber);
?
?? ??? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?});
?? ??? ??? ??? ?}
?? ??? ??? ?},
?? ??? ?}
?? ?}
</script>

<style lang="scss" scoped>
?? ?.login {
?? ??? ?min-height: 100vh;
?? ?}
?
?? ?.content {
?? ??? ?margin-top: 500rpx;
?? ?}
?
?? ?.button_wx {
?? ??? ?background-color: #07c160;
?? ??? ?display: flex;
?? ??? ?justify-content: center;
?? ??? ?align-items: center;
?? ??? ?color: #FFFFFF;
?? ??? ?font-size: 30rpx;
?? ??? ?width: 601rpx;
?? ??? ?height: 100rpx;
?? ??? ?border-radius: 2.5rem;
?? ?}
?
?? ?.button_text {
?? ??? ?font-size: 20px;
?? ??? ?margin-left: 0.5em;
?? ?}
</style>

文章來源地址http://www.zghlxwxcb.cn/news/detail-741952.html

到了這里，關(guān)于微信小程序-授權(quán)登錄(手機號碼)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！