uniapp實(shí)現(xiàn)微信小程序一鍵登錄功能

更新時(shí)間：2024年10月21日 09:41:16 作者：小李大魔王

這篇文章給大家介紹了uniapp實(shí)現(xiàn)微信小程序一鍵登錄功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧

前言

實(shí)現(xiàn)微信一鍵登錄的流程：

① 微信小程序端獲取臨時(shí)憑證code（code只能被消費(fèi)一次）

② 將code交給后端

③ 后端拿到code，向微信服務(wù)器發(fā)起請(qǐng)求，拿到openid（openid代表微信用戶在一個(gè)小程序中的唯一標(biāo)識(shí)，另外拓展一下unionid代表微信用戶在企業(yè)中的唯一標(biāo)識(shí)）

④ 后端查詢數(shù)據(jù)庫(kù)是否存在這個(gè)openid，存在則登錄，返回token;不存在則注冊(cè)賬號(hào)，登錄，返回token

一、復(fù)制 AppID 和 AppSecret

去微信公眾平臺(tái) -> 開發(fā)與服務(wù) -> 開發(fā)管理：微信公眾平臺(tái) (qq.com)

復(fù)制AppID和AppSecret

二、通過(guò)uni.login() 拿到臨時(shí)憑證code

uni.login({
        provider: 'weixin',
        success: function (loginRes) {
        	//	打印臨時(shí)憑證
        	console.log(loginRes.code)
    	}
});

另外，可以通過(guò)uni.getUserInfo()獲取到用戶的頭像、昵稱、手機(jī)號(hào)等信息，不過(guò)手機(jī)號(hào)需要企業(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)
    }
})

三、后端用臨時(shí)憑證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之后便可以通過(guò)查詢數(shù)據(jù)庫(kù)實(shí)現(xiàn)一鍵登錄了

到此這篇關(guān)于uniapp實(shí)現(xiàn)微信小程序一鍵登錄的文章就介紹到這了,更多相關(guān)uniapp微信小程序一鍵登錄內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: