微信小程序 免登陆,授权获取手机号

news/2024/7/20 4:00:50 标签: 小程序, openid

最近改造一个微信小程序项目:

原登录逻辑:直接获取用户信息(wx.getUserProfile)进行登录

改造后:用户登录前先获取用户手机号 判断时候注册过 再进行后续操作(这边主要介绍如何直接获取手机号)

实现逻辑

 

微信小程序页面代码(wxml)比较简单没什么好介绍的

<view class="container">
    <button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber" class="login-btn one"
      type="warn">微信手机号码授权</button>
  </view>
  <view class="form-box">
    <button type="primary" class="login-btn two" catch:tap="wxBack">暂不授权</button>
  </view>
</view>

重点JS实现

var api = require('../../../config/api.js');
var util = require('../../../utils/util.js');
var user = require('../../../utils/user.js');

var app = getApp();
Page({
	data: {
		sessionkey: '',
		code: '',
		openId: undefined,
		unionId: undefined,
	},
	onLoad: function (options) {
		// 页面初始化 options为页面跳转所带来的参数
		// 调用wx.login获取code 并调用后台获取sessionKey
		var that = this;
		//刷新sessionKey
		wx.login({
			success(res) {
				that.setData({
					code: res.code
				})
                //后台通过code获取openId和sessionkey方法
				util.request(api.getSessionKey, {
					code: res.code,
				}, 'GET').then(res => {
                    //将返回值绑定到data中
					that.setData({
						openId: res.data.openId,
						unionId: res.data.unionId,
						sessionkey: res.data.sessionKey
					})
				})
			}
		})
	},
	onReady: function () {

	},
	onShow: function () {
		// 页面显示
	},
	onHide: function () {
		// 页面隐藏

	},
	onUnload: function () {
		// 页面关闭

	},

	wxBack() {
		wx.switchTab({
			url: '/pages/positionList/positionList'
		})
	},



	getPhoneNumber(e) {
		let that = this;
        //后台解密手机号方法
		util.request(api.getPhoneNumber, {
			sessionKey: that.data.sessionkey,
			openId: that.data.openId,
			unionId: that.data.unionId,
			wxPhoneCiphertext: e.detail
		}, 'POST').then(res => {
			if (res.errno === 0) {
				//已有账号 登录成功
				//存储用户信息
				wx.setStorageSync('userInfo', res.data.userInfo);
				wx.setStorageSync('token', res.data.token);
				wx.setStorageSync('tokenStatus', 1)
				app.globalData.hasLogin = true;
				wx.setStorageSync('isWxUser', 1);
				wx.switchTab({
					url: '/pages/recruitPerson/recruitPerson',
				})
			} else if (res.errno === 509) {
                //没有账号进一步获取用户信息
				that.getUserProfile();
			}
		})
	},

	getUserProfile() {
		// An highlighted block
		wx.showModal({
			title: '温馨提示',
			content: '点击确定获取微信头像及昵称',
			success(res) {
				if (res.confirm) {
					wx.getUserProfile({
						desc: "获取你的昵称、头像、地区及性别",
						success: res => {
							user.loginByWeixin(res.userInfo).then(res => {
								app.globalData.hasLogin = true;
								wx.setStorageSync('isWxUser', 1);
								wx.switchTab({
									url: '/pages/recruitPerson/recruitPerson',
								})
							}).catch((err) => {
								app.globalData.hasLogin = false;
								util.showErrorToast('微信登录失败');
							});
						},
						fail: res => {
							//拒绝授权
							that.showErrorModal('您拒绝了请求');
							return;
						}
					})
				} else if (res.cancel) {
					//拒绝授权 showErrorModal是自定义的提示
					that.showErrorModal('您拒绝了请求');
					return;
				}
			}
		})
	},

})

 


http://www.niftyadmin.cn/n/1483563.html

相关文章

Ajax+Servlet实现无刷新下拉联动

下拉联动的功能可以说非常的常用&#xff0c;例如在选择省、市等信息的时候&#xff1b;或者在选择大类、小类的时候。总之&#xff0c;下拉联动很常用。今天就跟大家分享一个简单的二级下拉联动的功能。大类下拉框&#xff1a;页面加载的时候就初始化大类的下拉选项&#xff0…

maven添加多环境配置

maven添加多环境配置 日常开发和部署时难免会碰到多环境配置不同&#xff0c;需要切换配置的问题&#xff0c;这次就来记录我在maven项目中添加多环境的过程。 整理出需要的配置添加到pom中 这里以数据库连接地址为例&#xff08;我这边是springboot项目 配置文件为yml&…

application.yml文件读取不到pom中profiles的环境变量

application.properties读取pom.xml文件的变量应该使用 ${变量名} application.yml读取pom.xml文件的变量应该使用 变量名 ${变量名}在yml中表示读取yml文件内部的变量值 具体操作步骤可查看 maven添加多环境配置 这篇文章

mycat应用场景

mycat应用场景 以下是几个典型的应用场景&#xff1a;单纯的读写分离&#xff0c;此时配置最为简单&#xff0c;支持读写分离&#xff0c;主从切换分表分库&#xff0c;对于超过1000万的表进行分片&#xff0c;最大支持1000亿的单表分片多租户应用&#xff0c;每个应用一个库&a…

使用Unity3D引擎开发赛车游戏

Car Tutorial 在Unity3D的Asset Store有一个赛车的Demo —— Car Tutorial&#xff0c;看起来特别酷的赛车游戏Demo&#xff0c;不过我还没有下载下来&#xff0c;因为在公司下载Assets Store的资源实在太慢啦&#xff0c;下载速度基本不会动的。 Unity提供的汽车动力学 Unity3…

WinFrom日记————C#数据库连接

C#的数据库连接要使用using System.Data.SqlClient;实例 首先先连接数据库 SqlConnection sql_con new SqlConnection("server.;databasedb_test_n1;uidsa;pwd1230");server数据库地址&#xff0c;在本地其实用localhost和.应该区别都比大&#xff0c;database是数…

kubernetes学习 数据管理 Volume (二)

二、hostPath hostPath Volume 的作用是将 Docker Host 文件系统中已存在的目录 mount 给 Pod 的容器。 大部分应用都不会使用 hostPath Volume, 因为这实际上增加了 Pod 与节点的耦合&#xff0c;限制了 Pod 的使用。 不过那些需要访问 Kubernetes 和 Docker 内部数据的应用则…

ElasticSearch开放外部访问 并解决启动报错

ElasticSearch默认只能通过localhost访问&#xff0c;外部无法访问。 开放外网访问需要修改配置&#xff1a; 修改elasticsearch.yml vim config/elasticsearch.yml在文件最后增加 network.host: 0.0.0.0此时启动失败 报错 [2018-05-18T17:44:59,658][INFO ][o.e.b.Bootstr…