uniapp本机号码一键登录

本文讲解了使用uniapp一键登录功能的详细步骤，实现效果如图：

一、创建应用 1. 登录dcloud开发者中心 2. 创建应用，选择应用类型为uniapp，并填写应用名称

3. 在HBuilderX中设置项目的AppID

二、开通一键登录服务

点击左侧【一键登录】菜单下的【基础配置】，同意协议并开通

ApiKey和ApiSecret在后续将用到

三、创建uniCloud模块，关联云服务空间 1. HBuilderX中，右键项目，点击【创建uniCloud云开发环境】，选择腾讯云或阿里云。

2. 关联云服务空间

(1) 右键unicloud目录，点击【关联云服务空间或项目】

(2) 如果没有云服务空间，点击【新建】

(3) 在新打开的网页弹窗中，填写服务空间的名称，并点击创建

(4) 回到HBuilderX，选择一个服务空间，点击【关联】按钮

四、创建云函数 1. 右键/uniCloud/cloudfunctions目录，新建云函数

2. 打开/uniCloud/cloudfunctions/login/index.js，添加文件内容如下 'use strict';const crypto = require('crypto')exports.main = async (event, context) => {console.log('event : ', event); //event为客户端上传的参数console.log('参数', event.queryStringParameters); //云函数URL化的方式，获取参数const res = await uniCloud.getPhoneNumber({appid: 'xxx', // 开通一键登录的应用的DCloud appid，使用callFunction方式调用时可以不传（会自动取当前客户端的appid），如果使用云函数URL化的方式访问必须传此参数provider: 'univerify',apiKey: 'xxx', // 在开发者中心开通服务并获取apiKeyapiSecret: 'xxx', // 在开发者中心开通服务并获取apiSecretaccess_token: event.queryStringParameters.access_token,openid: event.queryStringParameters.openid})console.log('res', res); // res里包含手机号// 执行用户信息入库等操作，正常情况下不要把完整手机号返回给前端// 如果数据库在uniCloud上，可以直接入库// 如果数据库不在uniCloud上，可以通过 uniCloud.httpclient API，将手机号通过http方式传递给其他服务器的接口，详见：https://uniapp.dcloud.net.cn/uniCloud/cf-functions?id=httpclientreturn res}; 3. 右键云函数/uniCloud/cloudfunctions/login，选择【上传部署】

注意：每次修改了云函数文件内容，都需要重新上传部署

五、云函数设置

右键/uniCloud目录，选择【打开uniCloud Web控制台】，设置如下内容：

1. 云函数URL化的path

(1). 找到上传的云函数，点击详情

设置云函数的访问路径
2. 跨域配置，设置安全域名

六、模块配置

在项目的manifest.json中开启【一键登录】

七、编写代码：

公共js文件，主要涉及两个相关API：

export default {/** * 一键登录预登录检查 * @return {boolean} 是否支持一键登录 */pre_login(){uni.getProvider({ //获取可用的服务提供商service: 'oauth',success: function(res) {console.log(res.provider) // ['weixin', qq', 'univerify']}});return new Promise((resolve, reject)=>{uni.preLogin({ //预登录provider: 'univerify', //用手机号登录success() {resolve(true)},fail(err) { //预登录失败console.log(`预登录失败(${err.errCode})`, err.errMsg)resolve(false)}})})},/** * 本机号码一键登录 */async fast_login(){return new Promise((resolve, reject)=>{uni.login({ //正式登录，弹出授权窗provider: 'univerify',univerifyStyle: { // 自定义登录框样式"fullScreen": true, // 是否全屏显示，true表示全屏模式，false表示非全屏模式，默认值为false。"backgroundColor": "#ffffff", // 授权页面背景颜色，默认值：#ffffff "phoneNum": {"color": "#000000", // 手机号文字颜色 默认值：#000000 },"authButton": {"normalColor": "#3479f5", // 授权按钮正常状态背景颜色 默认值：#3479f5 "highlightColor": "#2861c5", // 授权按钮按下状态背景颜色 默认值：#2861c5（仅ios支持） "disabledColor": "#73aaf5", // 授权按钮不可点击时背景颜色 默认值：#73aaf5（仅ios支持） "textColor": "#ffffff", // 授权按钮文字颜色 默认值：#ffffff "title": "本机号码一键登录" // 授权按钮文案 默认值：“本机号码一键登录” }},success(res) { // 正式登录成功console.log(res.authResult); // {openid:'登录授权唯一标识',access_token:'接口返回的 token'}resolve(res.authResult)// 在得到access_token后，通过callfunction调用云函数// uniCloud.callFunction({// name: 'login', // 云函数名称// data: { //传给云函数的参数// 'access_token': res.authResult.access_token, // 客户端一键登录接口返回的access_token// 'openid': res.authResult.openid // 客户端一键登录接口返回的openid// },// success(callRes) {// console.log('调用云函数成功' + callRes)// },// fail(callErr) {// console.log('调用云函数出错' + callErr)// },// complete() {// uni.closeAuthView() //关闭授权登录界面// }// })uni.closeAuthView() //关闭授权登录界面},fail(err) { // 正式登录失败console.log(`一键登录失败(${err.errCode})`, err.errMsg)reject(err)// uni.closeAuthView() //关闭授权登录界面}})})}}

在登录页面中调用：

import service from "@/common/mp_service.js"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)// 登录操作，获取token和用户信息等操作}catch(e){console.log('一键登录失败', e)}},}