UniApp開發(fā)H5接入微信登錄的全過程
最近的uniapp開發(fā)中遇到了H5調(diào)微信授權(quán)登錄的業(yè)務(wù)，記錄一下解決方法
微信授權(quán)
微信授權(quán)分為兩種類型：
靜默授權(quán)：scope=snsapi_base。沒有彈窗，只能獲取到用戶的openid。
非靜默授權(quán)：scope=snsapi_userinfo。有彈窗，需要用戶手動(dòng)點(diǎn)擊同意授權(quán)，可獲取到用戶的openid、昵稱、頭像、性別。
以下為官方文檔中對(duì)兩種授權(quán)的解釋
關(guān)于網(wǎng)頁授權(quán)的兩種scope的區(qū)別說明
1、以snsapi_base為scope發(fā)起的網(wǎng)頁授權(quán)，是用來獲取進(jìn)入頁面的用戶的openid的，并且是靜默授權(quán)并自動(dòng)跳轉(zhuǎn)到回調(diào)頁的。用戶感知的就是直接進(jìn)入了回調(diào)頁（往往是業(yè)務(wù)頁面）
2、以snsapi_userinfo為scope發(fā)起的網(wǎng)頁授權(quán)，是用來獲取用戶的基本信息的。但這種授權(quán)需要用戶手動(dòng)同意，并且由于用戶同意過，所以無須關(guān)注，就可在授權(quán)后獲取該用戶的基本信息。
3、用戶管理類接口中的“獲取用戶基本信息接口”，是在用戶和公眾號(hào)產(chǎn)生消息交互或關(guān)注后事件推送后，才能根據(jù)用戶OpenID來獲取用戶基本信息。這個(gè)接口，包括其他微信接口，都是需要該用戶（即openid）關(guān)注了公眾號(hào)后，才能調(diào)用成功的。
微信授權(quán)的流程：
在微信的開放文檔中有詳細(xì)的說明，建議先閱讀文檔理清思路
解決思路
明白了具體的授權(quán)流程之后我們就可以來實(shí)現(xiàn)我們的業(yè)務(wù)了
1.正則匹配請(qǐng)求地址中的參數(shù)函數(shù)
getUrlCode(name) {
return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) ||[, ''])[1].replace(/\+/g, '%20')) || null
},2.進(jìn)入頁面時(shí)調(diào)用這個(gè)函數(shù)去看地址中有沒有code參數(shù)
getCode() {
let code = this.getUrlCode('code')
if (code === null || code === '') {
window.location. +
this.$common.wx.appID +
'&redirect_uri=' + encodeURIComponent(this.$common.wx.wxcallback) +
'&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect'
} else {
uni.$u.http.get('/rest/getOpenId', {
params: {
code: code
}
}).then(res => {
let openId = res.openid;
if (openId != null && openId != '') {
this.openId = openId
console.log(this.openId)
}
}).catch(err => {
})
}
},如果沒有code參數(shù)的話則請(qǐng)求微信官方的接口并獲取包含code的回調(diào)鏈接
3.使用code換取openid及access_token等參數(shù)
當(dāng)鏈接中有code的時(shí)候攜帶code請(qǐng)求下一個(gè)接口去獲取openid和access_token等參數(shù)，這部分我是用Java寫的后端來實(shí)現(xiàn)的，代碼如下：
package tech.niua.rest.H5Controller;
import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import org.apache.http.HttpEntity;
import org.apache.http.HttpStatus;
import org.apache.http.client.methods.CloseableHttpResponse;
import org.apache.http.client.methods.HttpGet;
import org.apache.http.impl.client.CloseableHttpClient;
import org.apache.http.impl.client.HttpClients;
import org.apache.http.util.EntityUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import tech.niua.admin.common.constant.WeiXinProperties;
import tech.niua.common.model.ResultCode;
import tech.niua.common.model.ResultJson;
import tech.niua.core.annotation.Log;
import java.io.IOException;
@RestController
@RequestMapping("/rest")
public class H5Controller {
@Autowired
WeiXinProperties weiXinProperties;
/**
* 根據(jù)code獲取openid
*
* @param code
* @return
*/
@Log(value = "根據(jù)code獲取openid")
@GetMapping("/getOpenId")
public ResultJson getOpenId(String code) throws IOException {
String url = "https://api.weixin.qq.com/sns/oauth2/access_token?&appid=" + weiXinProperties.getAppid() + "&secret=" + weiXinProperties.getAppSecret() + "&code=" + code + "&grant_type=authorization_code";
CloseableHttpClient client = HttpClients.createDefault();
HttpGet httpGet = new HttpGet(url);
CloseableHttpResponse res = client.execute(httpGet);
if (res.getStatusLine().getStatusCode() == HttpStatus.SC_OK) {
HttpEntity entity = res.getEntity();
String result = EntityUtils.toString(entity, "UTF-8");
JSONObject jsonObject = JSON.parseObject(result);
return ResultJson.ok(jsonObject);
}
return ResultJson.failure(ResultCode.BAD_REQUEST);
}
}請(qǐng)求成功的話微信的接口會(huì)返回類似如下參數(shù)
{
"access_token":"ACCESS_TOKEN",
"expires_in":7200,
"refresh_token":"REFRESH_TOKEN",
"openid":"OPENID",
"scope":"SCOPE"
}參數(shù)說明
| 參數(shù) | 描述 |
|---|---|
| access_token | 網(wǎng)頁授權(quán)接口調(diào)用憑證,注意：此access_token與基礎(chǔ)支持的access_token不同 |
| expires_in | access_token接口調(diào)用憑證超時(shí)時(shí)間，單位（秒） |
| refresh_token | 用戶刷新access_token |
| openid | 用戶唯一標(biāo)識(shí)，請(qǐng)注意，在未關(guān)注公眾號(hào)時(shí)，用戶訪問公眾號(hào)的網(wǎng)頁，也會(huì)產(chǎn)生一個(gè)用戶和公眾號(hào)唯一的OpenID |
| scope | 用戶授權(quán)的作用域，使用逗號(hào)（,）分隔 |
請(qǐng)求錯(cuò)誤時(shí)會(huì)返回如下
{"errcode":40029,"errmsg":"invalid code"}4.拉取用戶信息(需scope為 snsapi_userinfo)
如果網(wǎng)頁授權(quán)作用域?yàn)閟nsapi_userinfo，則此時(shí)開發(fā)者可以通過access_token和openid拉取用戶信息了。
請(qǐng)求方法
http：GET（請(qǐng)使用https協(xié)議） https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN
參數(shù)說明
| 參數(shù) | 描述 |
|---|---|
| access_token | 網(wǎng)頁授權(quán)接口調(diào)用憑證,注意：此access_token與基礎(chǔ)支持的access_token不同 |
| openid | 用戶的唯一標(biāo)識(shí) |
| lang | 返回國(guó)家地區(qū)語言版本，zh_CN 簡(jiǎn)體，zh_TW 繁體，en 英語 |
返回說明
正確時(shí)返回的JSON數(shù)據(jù)包如下：
{
"openid": "OPENID",
"nickname": NICKNAME,
"sex": 1,
"province":"PROVINCE",
"city":"CITY",
"country":"COUNTRY",
"headimgurl":"https://thirdwx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/46",
"privilege":[ "PRIVILEGE1" "PRIVILEGE2" ],
"unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL"
}| 參數(shù) | 描述 |
|---|---|
| openid | 用戶的唯一標(biāo)識(shí) |
| nickname | 用戶昵稱 |
| sex | 用戶的性別，值為1時(shí)是男性，值為2時(shí)是女性，值為0時(shí)是未知 |
| province | 用戶個(gè)人資料填寫的省份 |
| city | 普通用戶個(gè)人資料填寫的城市 |
| country | 國(guó)家，如中國(guó)為CN |
| headimgurl | 用戶頭像，最后一個(gè)數(shù)值代表正方形頭像大?。ㄓ?、46、64、96、132數(shù)值可選，0代表640*640正方形頭像），用戶沒有頭像時(shí)該項(xiàng)為空。若用戶更換頭像，原有頭像URL將失效。 |
| privilege | 用戶特權(quán)信息，json 數(shù)組，如微信沃卡用戶為（chinaunicom） |
| unionid | 只有在用戶將公眾號(hào)綁定到微信開放平臺(tái)帳號(hào)后，才會(huì)出現(xiàn)該字段。 |
錯(cuò)誤時(shí)微信會(huì)返回JSON數(shù)據(jù)包如下（示例為openid無效）:
{"errcode":40003,"errmsg":" invalid openid "}這樣業(yè)務(wù)就實(shí)現(xiàn)了，具體的其他接口請(qǐng)參照
微信開放文檔 (qq.com)https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html
總結(jié)
到此這篇關(guān)于UniApp開發(fā)H5接入微信登錄的文章就介紹到這了,更多相關(guān)UniApp H5接入微信登錄內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
CocosCreator如何實(shí)現(xiàn)劃過的位置顯示紋理
這篇文章主要介紹了CocosCreator紋理shader的一些知識(shí)，想了解shader的同學(xué)，一定要看下，并且親自動(dòng)手實(shí)踐2021-04-04
JavaScript調(diào)用傳遞變量參數(shù)的相關(guān)問題及解決辦法
本文給大家介紹javascript調(diào)用傳遞變量參數(shù)的相關(guān)問題及解決辦法，涉及到j(luò)s調(diào)用傳遞參數(shù)相關(guān)知識(shí)，對(duì)js調(diào)用傳遞參數(shù)感興趣的朋友一起學(xué)習(xí)吧2015-11-11
js數(shù)值和和字符串進(jìn)行轉(zhuǎn)換時(shí)可以對(duì)不同進(jìn)制進(jìn)行操作
這篇文章主要介紹了js數(shù)值和和字符串進(jìn)行轉(zhuǎn)換時(shí)可以對(duì)不同進(jìn)制進(jìn)行操作,需要的朋友可以參考下2014-03-03
javascript 解析后的xml對(duì)象的讀取方法細(xì)解
2009-07-07
js輸入中文效果...2006-09-09
將form表單中的元素轉(zhuǎn)換成對(duì)象的方法適用表單提交
這篇文章主要介紹了如何將form表單中的元素轉(zhuǎn)換成對(duì)象,需要的朋友可以參考下2014-05-05
原生JS實(shí)現(xiàn)移動(dòng)端web輪播圖詳解（結(jié)合Tween算法造輪子）
在做移動(dòng)端開發(fā)的時(shí)候，必不可少的是輪播圖，下面這篇文章主要給大家介紹了關(guān)于利用純JS實(shí)現(xiàn)移動(dòng)端web輪播圖的相關(guān)資料，重要的是結(jié)合Tween算法造輪子，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來一起看看吧。2017-09-09
js實(shí)現(xiàn)轉(zhuǎn)盤抽獎(jiǎng)功能
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)轉(zhuǎn)盤抽獎(jiǎng)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
下面小編就為大家?guī)硪黄獁indow.open打開窗口被攔截的快速解決方法。覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08
js拖動(dòng)滑塊和點(diǎn)擊水波紋效果實(shí)例代碼
在本文里面我們給大家分享了js實(shí)現(xiàn)拖動(dòng)滑塊和點(diǎn)擊水波紋效果的相關(guān)實(shí)例代碼，有需要的朋友們學(xué)習(xí)下。2018-10-10