Android SIm一键登录 手机一键登录怎么设置

本文讲解了使用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', // 在开发者中心开通服务并获取apiKey
		apiSecret: 'xxx', // 在开发者中心开通服务并获取apiSecret
		access_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=httpclient
	return res
};

3. 右键云函数/uniCloud/cloudfunctions/login，选择【上传部署】

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

五、云函数设置

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

1. 云函数URL化的path

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

2. 设置云函数的访问路径

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)
		}
	},
}