使用uniapp實(shí)現(xiàn)移動(dòng)端手機(jī)號(hào)一鍵登錄功能。

uni一鍵登錄是DCloud聯(lián)合個(gè)推公司推出的，整合了三大運(yùn)營(yíng)商網(wǎng)關(guān)認(rèn)證能力的服務(wù)。

通過運(yùn)營(yíng)商的底層SDK，實(shí)現(xiàn)App端無需短信驗(yàn)證碼直接獲取手機(jī)號(hào)，也就是很多主流App都提供的一鍵登錄功能

首先需要登錄DCloud開發(fā)者中心，申請(qǐng)開通一鍵登錄服務(wù)。

?開通后會(huì)得到ApiKey和Apisecret，和計(jì)費(fèi)有關(guān)，扣費(fèi)憑證，請(qǐng)勿泄露此信息！

點(diǎn)擊應(yīng)用管理——我的應(yīng)用——?jiǎng)?chuàng)建應(yīng)用，填寫信息，appid在manifest.json的基礎(chǔ)配置中，Android 應(yīng)用簽名可以使用云打包的公共證書簽名，也可以生成自有證書。

添加應(yīng)用后點(diǎn)擊一鍵登錄-基礎(chǔ)配置-添加應(yīng)用（不創(chuàng)建應(yīng)用應(yīng)用簽名無法填入）等待審核……

項(xiàng)目文件夾右鍵創(chuàng)建UNICloud云開發(fā)環(huán)境，新建云函數(shù)，getPhoneNumber文件夾中index.js代碼示例：

'use strict';
exports.main = async (event, context) => {
  // event里包含著客戶端提交的參數(shù)
  const res = await uniCloud.getPhoneNumber({
  	appid: '_UNI_ABCDEFG', // 替換成自己開通一鍵登錄的應(yīng)用的DCloud appid
  	provider: 'univerify',
  	apiKey: 'xxx', // 在開發(fā)者中心開通服務(wù)并獲取apiKey
  	apiSecret: 'xxx', // 在開發(fā)者中心開通服務(wù)并獲取apiSecret
  	access_token: event.access_token,
  	openid: event.openid
  })
  
  console.log(res); // res里包含手機(jī)號(hào)
  // 執(zhí)行用戶信息入庫等操作，正常情況下不要把完整手機(jī)號(hào)返回給前端
  // 如果數(shù)據(jù)庫在uniCloud上，可以直接入庫
  // 如果數(shù)據(jù)庫不在uniCloud上，可以通過 uniCloud.httpclient API，將手機(jī)號(hào)通過http方式傳遞給其他服務(wù)器的接口，詳見：https://uniapp.dcloud.net.cn/uniCloud/cf-functions?id=httpclient
  return {
    code: 0,
    message: '獲取手機(jī)號(hào)成功'
  }
}

在package.json寫入：

{
? "name": "getPhoneNumber",
? "dependencies": {},
? "extensions": {
? ? "uni-cloud-jql": {},
? ? "uni-cloud-verify": {}
? }
}

右鍵uniCloud關(guān)聯(lián)云服務(wù)空間或項(xiàng)目，沒有的話點(diǎn)擊新建，可以選免費(fèi)版，我選擇的是阿里云

?右鍵getPhoneNumber上傳部署

// 手機(jī)號(hào)一鍵登錄
getIphone() {
?? ?uni.preLogin({//預(yù)登陸檢查是否符合一鍵登錄的環(huán)境，可不用
?? ??? ?provider: 'univerify',
?? ??? ?success: () => {
?? ??? ??? ?uni.login({
?? ??? ??? ??? ?provider: 'univerify',
?? ??? ??? ??? ?univerifyStyle: {
?? ??? ??? ??? ??? ?"fullScreen": true, // 是否全屏顯示，true表示全屏模式，false表示非全屏模式，默認(rèn)值為false。
?? ??? ??? ??? ??? ?"backgroundColor": "#ffffff", // 授權(quán)頁面背景顏色，默認(rèn)值：#ffffff ?
?? ??? ??? ??? ??? ?"phoneNum": {
?? ??? ??? ??? ??? ??? ?"color": "#000000", // 手機(jī)號(hào)文字顏色 默認(rèn)值：#000000 ??
?? ??? ??? ??? ??? ?},
?? ??? ??? ??? ??? ?"slogan": {
?? ??? ??? ??? ??? ??? ?"color": "#8a8b90", // ?slogan 字體顏色 默認(rèn)值：#8a8b90 ?
?? ??? ??? ??? ??? ?},
?? ??? ??? ??? ??? ?"icon": {
?? ??? ??? ??? ??? ??? ?"path": "static/logo.png" // 自定義顯示在授權(quán)框中的logo，僅支持本地圖片 默認(rèn)顯示App logo ??
?? ??? ??? ??? ??? ?},
?? ??? ??? ??? ??? ?"authButton": {
?? ??? ??? ??? ??? ??? ?"normalColor": "#3479f5", // 授權(quán)按鈕正常狀態(tài)背景顏色 默認(rèn)值：#3479f5 ?
?? ??? ??? ??? ??? ??? ?"highlightColor": "#2861c5", // 授權(quán)按鈕按下狀態(tài)背景顏色 默認(rèn)值：#2861c5（僅ios支持） ?
?? ??? ??? ??? ??? ??? ?"disabledColor": "#73aaf5", // 授權(quán)按鈕不可點(diǎn)擊時(shí)背景顏色 默認(rèn)值：#73aaf5（僅ios支持） ?
?? ??? ??? ??? ??? ??? ?"textColor": "#ffffff", // 授權(quán)按鈕文字顏色 默認(rèn)值：#ffffff ?
?? ??? ??? ??? ??? ??? ?"title": "本機(jī)號(hào)碼一鍵登錄" // 授權(quán)按鈕文案 默認(rèn)值：“本機(jī)號(hào)碼一鍵登錄” ?
?? ??? ??? ??? ??? ?},
?? ??? ??? ??? ??? ?"otherLoginButton": {
?? ??? ??? ??? ??? ??? ?"visible": "false", // 是否顯示其他登錄按鈕，默認(rèn)值：true ?
?? ??? ??? ??? ??? ?},
?? ??? ??? ??? ?},
?? ??? ??? ??? ?success: (res) => {
?? ??? ??? ??? ??? ?console.log(res)
?? ??? ??? ??? ??? ?uniCloud.callFunction({
?? ??? ??? ??? ??? ??? ?name: 'getPhoneNumber', // 你的云函數(shù)名稱
?? ??? ??? ??? ??? ??? ?data: {
?? ??? ??? ??? ??? ??? ??? ?access_token: res.authResult
?? ??? ??? ??? ??? ??? ??? ?.access_token, // 客戶端一鍵登錄接口返回的access_token
?? ??? ??? ??? ??? ??? ??? ?openid: res.authResult.openid // 客戶端一鍵登錄接口返回的openid
?? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?}).then(dataRes => {
?? ??? ??? ??? ??? ??? ?console.log('云函數(shù)返回的參數(shù)', dataRes)
?? ??? ??? ??? ??? ??? ?uni.showToast({
?? ??? ??? ??? ??? ??? ??? ?title: `當(dāng)前手機(jī)號(hào)為：${dataRes.result.phoneNumber}`,
?? ??? ??? ??? ??? ??? ??? ?icon: "none"
?? ??? ??? ??? ??? ??? ?})
?? ??? ??? ??? ??? ?}).catch(err => {
?? ??? ??? ??? ??? ??? ?console.log('云函數(shù)報(bào)錯(cuò)', err)
?? ??? ??? ??? ??? ?})
?? ??? ??? ??? ??? ?uni.showToast({
?? ??? ??? ??? ??? ??? ?title: res.authResult,
?? ??? ??? ??? ??? ??? ?icon: "none"
?? ??? ??? ??? ??? ?})
?? ??? ??? ??? ??? ?uni.closeAuthView() //關(guān)閉一鍵登錄彈出窗口
?? ??? ??? ??? ?},
?? ??? ??? ??? ?fail(res) { // 登錄失敗
?? ??? ??? ??? ??? ?uni.closeAuthView() //關(guān)閉一鍵登錄彈出窗口
?? ??? ??? ??? ??? ?console.log('失敗')
?? ??? ??? ??? ?},
?? ??? ??? ?})
?? ??? ?},
?? ??? ?fail(res) {
?? ??? ??? ?console.log('一鍵登錄失敗',res)
?? ??? ??? ?if (res.errMsg != 'login:ok') {
?? ??? ??? ??? ?uni.showToast({
?? ??? ??? ??? ??? ?title: res.metadata.msg,
?? ??? ??? ??? ??? ?icon: "none"
?? ??? ??? ??? ?})
?? ??? ??? ?}
?? ??? ??? ?//如果手機(jī)沒有插入有效的sim卡，或者手機(jī)蜂窩數(shù)據(jù)網(wǎng)絡(luò)關(guān)閉，
?? ??? ??? ?//都有可能造成預(yù)登錄校驗(yàn)失敗。
?? ??? ?}
?? ?})
},

成功后頁面：

?文章來源地址http://www.zghlxwxcb.cn/news/detail-421073.html

到了這里，關(guān)于UNIAPP手機(jī)號(hào)一鍵登錄的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！