uniapp實現(xiàn)微信小程序一鍵登錄功能
前言
實現(xiàn)微信一鍵登錄的流程:
① 微信小程序端獲取臨時憑證code(code只能被消費一次)
② 將code交給后端
③ 后端拿到code,向微信服務(wù)器發(fā)起請求,拿到openid(openid代表微信用戶在一個小程序中的唯一標(biāo)識,另外拓展一下unionid代表微信用戶在企業(yè)中的唯一標(biāo)識)
④ 后端查詢數(shù)據(jù)庫是否存在這個openid,存在則登錄,返回token;不存在則注冊賬號,登錄,返回token
一、復(fù)制 AppID 和 AppSecret
去 微信公眾平臺 -> 開發(fā)與服務(wù) -> 開發(fā)管理 :微信公眾平臺 (qq.com)
復(fù)制AppID和AppSecret

二、通過uni.login() 拿到臨時憑證code
uni.login({
provider: 'weixin',
success: function (loginRes) {
// 打印臨時憑證
console.log(loginRes.code)
}
});另外,可以通過uni.getUserInfo()獲取到用戶的頭像、昵稱、手機號等信息,不過手機號需要企業(yè)身份才可以,如:
// 登錄成功
uni.getUserInfo({
provider: 'weixin',
success: function(info) {
// 獲取用戶信息成功, info.authResult是用戶信息
const wxUserInfo = info.userInfo
// 打印頭像url
console.log(wxUserInfo.avatarUrl)
// 打印昵稱
console.log(wxUserInfo.nickName)
// 打印用戶詳細(xì)信息
console.log(wxUserInfo)
}
})三、后端用臨時憑證code換取openid
在spring-web工程中導(dǎo)入maven工具依賴
<dependency>
<groupId>cn.hutool</groupId>
<artifactId>hutool-all</artifactId>
<version>5.8.16</version>
</dependency>在下面工具類中配置自己的AppID,AppSecret后即可使用
import cn.hutool.http.HttpResponse;
import cn.hutool.http.HttpUtil;
import cn.hutool.json.JSONObject;
import cn.hutool.json.JSONUtil;
import org.springframework.web.util.UriComponentsBuilder;
public class WechatUtil {
// 配置自己的app_id、app_secret
private static final String APP_ID = "Your_APP_ID";
private static final String APP_SECRET = "Your_APP_SERCERT";
public static String getOpenId(String loginCode) {
String url = "https://api.weixin.qq.com/sns/jscode2session";
String requestUrl = UriComponentsBuilder.fromHttpUrl(url)
.queryParam("appid", APP_ID)
.queryParam("secret", APP_SECRET)
.queryParam("js_code", loginCode)
.queryParam("grant_type", "authorization_code")
.toUriString();
HttpResponse response = HttpUtil.createGet(requestUrl).execute();
// 獲取 session_key 和 openid
JSONObject parseObj = JSONUtil.parseObj(response.body());
String openid = (String) parseObj.get("openid");
return openid;
}
}拿到openid之后便可以通過查詢數(shù)據(jù)庫實現(xiàn)一鍵登錄了
到此這篇關(guān)于uniapp實現(xiàn)微信小程序一鍵登錄的文章就介紹到這了,更多相關(guān)uniapp微信小程序一鍵登錄內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
提交按鈕的name=''submit''引起的js失效問題及原因
這篇文章主要介紹了提交按鈕的name='submit'引起的js失效問題及原因,需要的朋友可以參考下2015-02-02
JavaScript正則表達式.test()基礎(chǔ)講解與實際應(yīng)用案例
正則表達式是JavaScript中處理字符串的強大工具,而test()方法則是其中最常用的方法之一,這篇文章主要介紹了JavaScript正則表達式.test()基礎(chǔ)講解與實際應(yīng)用案例的相關(guān)資料,需要的朋友可以參考下2026-05-05
js 兼容多瀏覽器的回車和鼠標(biāo)焦點事件代碼(IE6/7/8,firefox,chrome)
本文講一下js實現(xiàn)兼容IE6/7/8,firefox,chrome瀏覽器的回車和鼠標(biāo)焦點事件的代碼。2010-04-04
入門小白基礎(chǔ)篇之JavaScript預(yù)編譯詳解
js中的預(yù)編譯是指在代碼被執(zhí)行前解釋器對代碼進行的操作,這篇文章主要介紹了入門小白基礎(chǔ)篇之JavaScript預(yù)編譯的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2026-05-05
JavaScript實現(xiàn)頁面跳轉(zhuǎn)的三種方法詳解
這篇文章主要介紹了JavaScript實現(xiàn)頁面跳轉(zhuǎn)的三種主要方法:window.open()、window.location.href和window.location.replace(),包括它們的特點、適用場景及最佳實踐,需要的朋友可以參考下2026-03-03
JS+canvas實現(xiàn)的五子棋游戲【人機大戰(zhàn)版】
這篇文章主要介紹了JS+canvas實現(xiàn)的五子棋游戲,是采用比較強的AI實現(xiàn)的人機大戰(zhàn)版游戲,涉及javascript結(jié)合HTML5實現(xiàn)圖形繪制與人工智能相關(guān)操作技巧,需要的朋友可以參考下2017-07-07
對JavaScript的eval()中使用函數(shù)的進一步討論
《JavaScript語言精髓與編程實踐》的讀者I22141提出了一問題:為什么下面這段代碼在JScript 和SpiderMonkey中表現(xiàn)不一樣:2008-07-07
javascript獲得CheckBoxList選中的數(shù)量
javascript獲得CheckBoxList選中的數(shù)量(jQuery與Javascript對照學(xué)習(xí)/前臺與后臺)2009-10-10
JS+flash實現(xiàn)chrome和ie瀏覽器下同時可以復(fù)制粘貼
chrome和ie同時可以復(fù)制粘貼,想必大家一直思索的問題在本文將有一個不錯的實現(xiàn),下面為大家介紹下JS+flash是如何實現(xiàn)的,感興趣的朋友可以參考下2013-09-09

