一鍵登錄功能
官網(wǎng)文檔 https://uniapp.dcloud.net.cn/uniCloud/univerify.html#univerify
univerify 是DCloud 推出的一鍵登錄產(chǎn)品垢粮，通過與運營商深度合作，實現(xiàn)APP用戶無需輸入帳號密碼，即可使用本機手機號碼自動登錄的能力尉桩。
注意：一鍵登錄必須是手機使用流量的前提下才能獲取到手機號碼敷搪，用Wi-Fi聯(lián)網(wǎng)時無法獲取到手機號碼舆蝴，同時如果是雙卡手機潜索，獲取到的手機號碼是默認移動數(shù)據(jù)的那個手機卡的號碼抢野。
uni-app賬號準備
1贤斜、uni-app官網(wǎng)注冊賬號策吠，并且在DCloud開發(fā)者中心創(chuàng)建應(yīng)用
2逛裤、開通一鍵登錄服務(wù) 保管好ApiKey 和 ApiSecret
3、點擊上圖基礎(chǔ)配置頁面右下角添加應(yīng)用（開通一鍵登錄服務(wù)的應(yīng)用）
開始踩坑了
坑一：關(guān)于如何獲取Android應(yīng)用簽名MD5和SHA256,需要安裝jre環(huán)境猴抹，新版JRE環(huán)境下已不支持生成MD5带族，具體操作可參考https://ask.dcloud.net.cn/article/35777，自己電腦中裝了新版只拿到了SHA256蟀给，MD5半天沒弄好蝙砌，嫌麻煩，隨便找了一個跋理，也能用择克，后面公司開發(fā)項目的時候，這兩個簽名需要問公司要哦薪介；
4祠饺、添加服務(wù)空間
uni-app 開通一鍵登錄服務(wù)
1、項目開通uniCloud 服務(wù)
關(guān)聯(lián)云空間選擇阿里云或者騰訊云都可以汁政，這里選擇阿里云道偷；
2、新建云函數(shù)
3记劈、新建云函數(shù)后會有一個index.js生成勺鸦，粘貼一下代碼
'use strict';
const crypto = require('crypto')
exports.main = async (event, context) => {
//event為客戶端上傳的參數(shù)
console.log('event : ', event,5);
console.log('參數(shù)', event.queryStringParameters);
// event里包含著客戶端提交的參數(shù)
const res = await uniCloud.getPhoneNumber({
appid: '__UNI__FF1F966', // 替換成自己開通一鍵登錄的應(yīng)用的DCloud appid，使用callFunction方式調(diào)用時可以不傳（會自動取當前客戶端的appid）目木，如果使用云函數(shù)URL化的方式訪問必須傳此參數(shù)
provider: 'univerify',
apiKey: '84d1e1cf1730cb52870d5df100501226', // 在開發(fā)者中心開通服務(wù)并獲取apiKey
apiSecret: '26f1c69122a10ad0e103e5e7a157a407', // 在開發(fā)者中心開通服務(wù)并獲取apiSecret
access_token: event.access_token,
openid: event.openid
})
console.log('res',res); // res里包含手機號
// 執(zhí)行用戶信息入庫等操作换途，正常情況下不要把完整手機號返回給前端
// 如果數(shù)據(jù)庫在uniCloud上，可以直接入庫
// 如果數(shù)據(jù)庫不在uniCloud上刽射，可以通過 uniCloud.httpclient API军拟，將手機號通過http方式傳遞給其他服務(wù)器的接口，詳見：https://uniapp.dcloud.net.cn/uniCloud/cf-functions?id=httpclient
return {
code: 0,
message: '獲取手機號成功',
data: res
}
};
坑二：
云函數(shù)中event參數(shù)中的access_token和openid 直接使用event.access_token,event.openid,使用event.queryStringParameters.access_token,
event.queryStringParameters.openid 會報錯誓禁；
4懈息、保存后上傳部署到云空間
5、勾選項目中一鍵登錄（項目中manifest.json）
項目編輯
1摹恰、項目中新建common文件夾并且新建my_serve.js文件,創(chuàng)建預(yù)登錄以及一鍵快速登錄函數(shù)辫继，并且導(dǎo)出
export default {
/** * 一鍵登錄預(yù)登錄檢查 * @return {boolean} 是否支持一鍵登錄 */
pre_login(){
uni.getProvider({
//獲取可用的服務(wù)提供商
service: 'oauth',
success: function(res) {
console.log(res.provider) // ['weixin', qq', 'univerify']
},
});
return new Promise((resolve, reject)=>{
uni.preLogin({
//預(yù)登錄
provider: 'univerify', //用手機號登錄
success() {
console.log('預(yù)登錄成功,16')
resolve(true)
},
fail(err) {
//預(yù)登錄失敗
console.log(`預(yù)登錄失敗(${err.errCode})`, err.errMsg)
resolve(false)
}
})
})
},
/** * 本機號碼一鍵登錄 */
async fast_login(){
return new Promise((resolve, reject)=>{
uni.login({
//正式登錄，彈出授權(quán)窗
provider: 'univerify',
univerifyStyle: {
// 自定義登錄框樣式
"fullScreen": true, // 是否全屏顯示俗慈，true表示全屏模式姑宽，false表示非全屏模式，默認值為false闺阱。
"backgroundColor": "#ffffff", // 授權(quán)頁面背景顏色炮车，默認值：#ffffff
"phoneNum": {
"color": "#000000", // 手機號文字顏色 默認值：#000000
},
"authButton": {
"normalColor": "#3479f5", // 授權(quán)按鈕正常狀態(tài)背景顏色 默認值：#3479f5
"highlightColor": "#2861c5", // 授權(quán)按鈕按下狀態(tài)背景顏色 默認值：#2861c5（僅ios支持）
"disabledColor": "#73aaf5", // 授權(quán)按鈕不可點擊時背景顏色 默認值：#73aaf5（僅ios支持）
"textColor": "#ffffff", // 授權(quán)按鈕文字顏色 默認值：#ffffff
"title": "本機號碼一鍵登錄" ,// 授權(quán)按鈕文案 默認值：“本機號碼一鍵登錄”
},
"buttons": {
"iconWidth": "30px",
"list": [
{
"provider": "sinaweibo",
"iconPath": "/static/sina.png"
},
{
"provider": "weixin",
"iconPath": "/static/wechat.png"
},
{
"provider": "qq",
"iconPath": "/static/qq.png"
}
]
},
},
success(res) {
// 正式登錄成功
console.log(111)
console.log(res.authResult,50);
// {
// openid:'登錄授權(quán)唯一標識',
// access_token:'接口返回的 token'
// }
resolve(res.authResult)
// 在得到access_token后，通過callfunction調(diào)用云函數(shù)
uniCloud.callFunction({
name: 'oneLogin', // 云函數(shù)名稱
data: { //傳給云函數(shù)的參數(shù)
'access_token': res.authResult.access_token, //客戶端一鍵登錄接口返回的access_token
'openid': res.authResult.openid // 客戶端一鍵登錄接口返回的openid
},
success(callRes) {
console.log('調(diào)用云函數(shù)成功' + callRes + '獲取手機號成功')
uni.navigateTo({
url:"/pages/my/my"
})
},
fail(callErr) {
console.log('調(diào)用云函數(shù)出錯' + callErr)
},
complete() {
uni.closeAuthView() //關(guān)閉授權(quán)登錄界面
}
})
uni.closeAuthView() //關(guān)閉授權(quán)登錄界面
},
fail(err) {
// 正式登錄失敗
console.log(`一鍵登錄失敗(${err.errCode})`, err.errMsg)
reject(err)
// uni.closeAuthView()
//關(guān)閉授權(quán)登錄界面
}
})
})
}
}
2、在項目index頁面測試
import service from '../../common/my_serve.js'
//在onLoad(){}鉤子中調(diào)用預(yù)登錄函數(shù)
async onLoad() {
const can_login = await service.pre_login()
if(can_login){
this.fast_login()
}
},
methods: {
async fast_login() {
try{
const { access_token, openid } = await service.fast_login()
console.log("uniapp一鍵登錄", access_token, openid,29) // 登錄操作示血，獲取token和用戶信息等操作
}catch(e){
console.log('一鍵登錄失敗', e)
}
},
},
代碼生成效果如下：
坑三：
真機調(diào)試報錯 -20202是非流量的問題棋傍，需要開啟手機流量
坑四：
預(yù)登錄失敗 perLogin: fail
-當前客戶端和HBuilderX不在同一局域網(wǎng)下（或其他網(wǎng)絡(luò)原因無法連接HBuilderX）救拉，uniCloud本地調(diào)試服務(wù)不對當前客戶端生效难审。
-如果不使用uniCloud本地調(diào)試服務(wù)，請直接忽略此信息亿絮。
-如需使用uniCloud本地調(diào)試服務(wù)告喊，請將客戶端與主機連接到同一局域網(wǎng)下并重新運行到客戶端。
-如果在HBuilderX開啟的狀態(tài)下切換過網(wǎng)絡(luò)環(huán)境派昧，請重啟HBuilderX后再試
-檢查系統(tǒng)防火墻是否攔截了HBuilderX自帶的nodejs
早上調(diào)試還是正常的黔姜，晚上后就報這個錯，目前基本還沒找到切實可行的解決方案蒂萎，官方有聲明說在3.6.4中修復(fù)了這個bug,但我3.6.4還是出現(xiàn)這個問題秆吵，更換版本，重新安裝手機調(diào)試基座都試過五慈，無用纳寂，第二天早上換了幾次HBuilderX版本后莫名奇妙的好了，無語泻拦。毙芜。。
坑五：
報錯云函數(shù)調(diào)用失斦铡：access_token undefined, 要在https://dev.dcloud.net.cn/uniLogin 的一鍵登錄中充一點錢, 就成功了
預(yù)登錄以及一鍵登錄獲取手機號成功.png
其他補充
通過傳統(tǒng)服務(wù)器連接uniCloud云函數(shù)
開發(fā)者也可以在客戶端獲取到access_token等信息后腋粥，傳給自己的傳統(tǒng)服務(wù)器。然后由自己的傳統(tǒng)服務(wù)器架曹，訪問uniCloud的云函數(shù)（需將云函數(shù)URL化）隘冲。
參考官方文檔https://uniapp.dcloud.net.cn/univerify.html#%E7%94%A8access-token%E6%8D%A2%E6%89%8B%E6%9C%BA%E5%8F%B7 說的挺詳細的；
