uni-app?微信小程序授權登錄的實現(xiàn)步驟
一、appID相關申請和配置
1. appid獲取方式
登錄微信公眾平臺
官網(wǎng)鏈接：https://mp.weixin.qq.com/
第一次需要小伙伴們點擊注冊按鈕，進行注冊，如果有賬號，直接掃描登錄即可
官網(wǎng)小程序鏈接：
2. appID配置
在manifest.json中輸入申請的微信小程序id
二、獲取用戶基礎數(shù)據(jù)
這里給小伙伴們演示二種api
2.1. 獲取用戶信息
可以使用uni.getUserProfile請求用戶授權獲取用戶信息， 也可以使用uni.getUserInfo獲取
授權成功后獲取到的用戶信息在userInfo中：
頁面部分：
<button class="login-btn" type="primary" @click="getUserInfo">
微信用戶一鍵登錄
</button>
js部分：
methods: {
getUserInfo() {
uni.getUserInfo({
provider: 'weixin',
success: (res) => {
console.log('getUserInfo', res);
},
});
},
}
獲取的用戶基礎數(shù)據(jù)（無openid=》微信用戶唯一標識）
2.2. 獲取用戶信息2
可以使用uni.getUserInfo請求用戶授權獲取用戶信息
頁面一樣，js部分：
getUserInfo() {
uni.getUserProfile({
desc: '登錄后可同步數(shù)據(jù)',
lang: 'zh_CN',
success: (res) => {
console.log('getUserProfile', res);
},
});
},
獲取的用戶基礎數(shù)據(jù)（無openid=》微信用戶唯一標識）
總結：uni.getUserProfile和uni.getUserInfo 二個api獲取的用戶數(shù)據(jù)基本一樣，都無openid=》微信用戶唯一標識。
三、調(diào)用登錄api
3.1. 登錄api
使用uni.login方法，provider參數(shù)輸入’weixin’,成功的返回值中如果errMsg=“login:ok” 代表成功，
微信小程序端會返回一個code字符串
3.2. 案例代碼
uni.login({
provider: 'weixin',
success: (res) => {
console.log('res-login', res);
this.code = res.code;
console.log('code', res.code);
if (res.errMsg == 'login:ok') {
//TODO 獲取code 攜帶code參數(shù)調(diào)用后端接口}
四、獲取唯一標識信息
4.1. 官網(wǎng)文檔
官網(wǎng)文檔
使用獲取到的code請求微信登錄接口，獲取 openid 和 session_key
4.2. 接口簡述
請求方式:GET
APPID：小程序唯一標識，上面有獲取方式
SECRET：小程序唯一標識的秘鑰，上面參考APPID獲取方式，就在他的下面
JSCODE：這個前端調(diào)用 uni.login獲取
GET https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code
五、綁定用戶 實現(xiàn)登錄
獲取到微信用戶的唯一id后，就可以綁定至自己系統(tǒng)中的用戶，我的做法是在用戶表中加入weixinId字段，跳轉至自己的用戶綁定界面，如果用戶選擇綁定微信，則更新該行用戶數(shù)據(jù)的weixinId。下次用戶使用微信登錄時，如果通過openId能夠查詢到一條用戶數(shù)據(jù)，說明已經(jīng)綁定，則登錄該用戶
5.1. 代碼案例（未封裝）
前端部分：
/**
*
* 獲取用戶信息
*/
getUserInfo() {
// 展示加載框
uni.showLoading({
title: '加載中',
});
uni.getUserProfile({
desc: '登錄后可同步數(shù)據(jù)',
success: async (obj) => {
console.log('obj', obj);
// 調(diào)用 action ，請求登錄接口
// await this.login(obj);
uni.login({
provider: 'weixin',
success: (res) => {
console.log('res-login', res);
this.code = res.code;
console.log('code', res.code);
if (res.errMsg == 'login:ok') {
uni
.request({
url:
'http://127.0.0.1:8080/wxh5/wx/user/' +
'wx55822xxxx75e422' +
'/login/',
data: {
code: this.code,
},
})
.then((res) => {
//獲取到 openid 和 session_k后，自己的邏輯
console.log('授權登錄', res[1].data);
console.log(res[1].data.openid);
console.log(res[1].data.session_key);
// DoSomeThing.................
});
console.log('res', res);
}
},
});
},
fail: () => {
uni.showToast({
title: '授權已取消',
icon: 'error',
mask: true,
});
},
complete: () => {
// 隱藏loading
uni.hideLoading();
},
});
},
后端部分
@GetMapping("/login")
public String login(@PathVariable String appid, String code) {
if (StringUtils.isBlank(code)) {
return "empty jscode";
}
final WxMaService wxService = WxMaConfiguration.getMaService(appid);
try {
WxMaJscode2SessionResult session = wxService.getUserService().getSessionInfo(code);
this.logger.info(session.getSessionKey());
this.logger.info(session.getOpenid());
//TODO 可以增加自己的邏輯，關聯(lián)業(yè)務相關數(shù)據(jù)
return JsonUtils.toJson(session);
} catch (WxErrorException e) {
this.logger.error(e.getMessage(), e);
return e.toString();
}
}
5.2. 代碼案例（封裝）
/**
*
* 獲取用戶信息
*/
getUserInfo() {
// 展示加載框
uni.showLoading({
title: '加載中',
});
uni.getUserProfile({
desc: '登錄后可同步數(shù)據(jù)',
success: async (obj) => {
// this.userInfo = obj.userInfo;
// 調(diào)用 action ，請求登錄接口
uni.login({
provider: 'weixin',
success: async (res) => {
this.code = res.code;
// console.log('登錄獲取code', res.code);
if (res.errMsg == 'login:ok') {
await this.loginAuth({
userProfile: obj,
appid: 'wx558xxxxxxxxxxxxxxx2',
code: this.code,
});
}
},
});
},
fail: () => {
uni.showToast({
title: '授權已取消',
icon: 'error',
mask: true,
});
},
complete: () => {
// 隱藏loading
uni.hideLoading();
},
});
},
},
user.js
/**
* 微信用戶授權登錄，攜帶appid和code參數(shù)，調(diào)用后端接口獲取Openid
*/
export function loginAuth(data) {
return request({
url: '/wx/user/' + data.appid + '/login/',
data: {
code: data.code,
},
});
}
vuex user模塊（user.js）
// 微信用戶授權登錄，攜帶appid和code參數(shù)，調(diào)用后端接口獲取Openid
async loginAuth(context, data) {
console.log('data', data);
const userInfo = data.userProfile;
const { content: res } = await loginAuth({
appid: data.appid,
code: data.code,
});
// 解析后端傳送過來的json對象
const userAuthInfo = JSON.parse(res);
const openid = userAuthInfo.openid;
// console.log('sessionKey', userAuthInfo.sessionKey);
console.log('openid', openid);
// 保存到vuex中，通過commit
this.commit('user/setOpenid', userAuthInfo.openid);
this.commit('user/setUserInfo', JSON.parse(userInfo.rawData));
},
六、項目開源地址
6.1. 前端
6.2. 后端
到此這篇關于uni-app 微信小程序授權登錄的文章就介紹到這了,更多相關uni-app 微信小程序授權登錄內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
JS?getRandomValues和Math.random方法深入解析
這篇文章主要為大家介紹了JS?getRandomValues和Math.random方法深入詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
這篇文章主要介紹了Typescript中函數(shù)類型,主要包括常見寫法、可選參數(shù)，默認參數(shù)及剩余參數(shù)，本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-01-01
下面小編就最近學會的一些”求線段交點”的算法說一說, 希望對大家有所幫助?！扒缶€段交點”是一種非常基礎的幾何計算, 在很多游戲中都會被使用到。有需要的可以參考學習2016-08-08
JavaScript函數(shù)防抖與函數(shù)節(jié)流的定義及使用詳解
這篇文章主要為大家詳細介紹一下JavaScript中函數(shù)防抖與函數(shù)節(jié)流的定義及使用，文中的示例代碼講解詳細，對我們學習JS有一定幫助，需要的可以參考一下2022-08-08
這篇文章介紹了js判定是否原生方法，有需要的朋友可以參考一下2013-07-07
JavaScript實現(xiàn)模態(tài)對話框實例
這篇文章主要介紹了JavaScript實現(xiàn)模態(tài)對話框實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-01-01
在這一章我會講解如何去訪問一個事件對象。2010-02-02
在我們的WebApp項目中，Dialog是個不可或缺的元素，很多頁面操作都通過Dialog來進行，今天我們就Dialog顯示數(shù)據(jù)、提交數(shù)據(jù)做進一步分析2012-10-10
這篇文章主要為大家詳細介紹了基于openlayers4實現(xiàn)點的擴散效果 ，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-01-01
js+html5操作sqlite數(shù)據(jù)庫的方法
這篇文章主要介紹了js+html5操作sqlite數(shù)據(jù)庫的方法,以完整實例形式分析了JavaScript封裝的html5操作SQLite數(shù)據(jù)庫類,并分析了具體使用技巧,需要的朋友可以參考下2016-02-02