微信小程序登录方法,授权登陆及获取微信用户手机号

news2025/2/27 14:11:28

 ✅作者简介:

             大家好五一快乐,我是痴心阿文,你们的学友哥,今天给大家分享微信小程序登录方法!
📃个人主页:痴心阿文的博客_CSDN博客-TypeScript.js,笔记,CSS领域博主
🔥本文前言:微信小程序登录方法,授权登陆及获取微信用户手机号
💖如果觉得博主的文章有帮到你的话,请👍支持一下博主哦🤞  

 

🍉🍉🍉先看一下小程序的登陆流程

 

 使用说明注意:

    调用 auth.code2Session 接口,换取 用户唯一标识 OpenID 、 用户在微信开放平台帐号下的唯一标识UnionID(若当前小程序已绑定到微信开放平台帐号) 和 会话密钥 session_key。

    之后开发者服务器可以根据用户标识来生成自定义登录态,用于后续业务逻辑中前后端交互时识别用户身份。

    注意事项

    会话密钥 session_key 是对用户数据进行 加密签名 的密钥。为了应用自身的数据安全,开发者服务器不应该把会话密钥下发到小程序,也不应该对外提供这个密钥。

    临时登录凭证 code 只能使用一次

🍉🍉🍉 第一步, 调用微信登陆方法 wx.login() 获取临时登录凭证code ,并回传到开发者服务器。

//微信登录方法 wx.login()

//调用微信登录方法 wx.login() 获取临时登录凭证code ,并回传到开发者服务器。

login() {
    wx.login({
        success: (ress) => {
            wx.request({
                url: '服务器后端接口',
                data: {
                    code: ress.code
                },
                success: (result) => {
                    console.log(result.data.openId); //获取到openid
                }
            })
        }, fail: (error) => {
            console.log('登录失败!' + error);
        }
    })
}

微信登录的一些参数 

🍉​​​​​​​🍉​​​​​​​🍉第二步,获取用户信息,点击事件,获取用户授权,用户同意后然后返回信息

//利用后端接口获取openid,获取到自己系统账号的id,当前小程序已绑定到微信开放平台帐号,与微信号绑定,使得下次登录微信账号就跟小程序系统的账号绑定。

//getUserProfile 方法

getUserProfile() {
    var that = this
    wx.getUserProfile({
        desc: '用于获取用户微信个人信息',// 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写
        success: (res) => {
            wx.login({
                success: (ress) => {
                    wx.request({
                        url: '服务器后端接口',
                        data:{
                            code:ress.code,
                        },
                        success: (result) => {
                            console.log(result.data.openId); //获取到openid
                            wx.request({
                                url: '服务器后端接口',
                                data:{
                                    openId:result.data.openId,
                                },
                                success: (results) => {
                                    console.log(results.data.session_key);//拿到自己的系统账号
                                },
                                fail: (errors) => {
                                    console.log(errors);
                                }
                            })

                        },
                        fail: (error) => {
                            console.log(error);
                        }
                    })
                }
            })
        },
        fail: (err) => {
            console.log(err)
        }

    })
}

🍉​​​​​​​🍉​​​​​​​🍉第三步,获取用户手机号

 获取用户手机号流程如下:

      wx.Login()方法 → 获取登录凭证(code)→将code发送到后端 → 后端拿到openid和session_key → 调用getPhoneNumber 方法  →  将 encryptedData 和 iv 传给后端  →  后端获得json

下面是官方获取手机号介绍截图 

//获取手机号 html代码

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>



//获取微信用户手机号方法  

getPhoneNumber (e) {
    console.log(e.detail.code)
    console.log(e.detail.errMsg)
    console.log(e.detail.iv)
    wx.login({
        success:res =>{
            console.log(res.code);
            wx.request({
                url:'服务器后端接口',
                data:{
                   'encryptedData':e.detail.encryptedData,
                   'iv':e.detail.iv,
                   'codes':e.detail.code
                },
                method:'GET',
                header:{
                    'content-type':'application/json'
                },
                success:function(res){
                    wx.setStorageSync('PhoneNumber',res.data.phoneNumber);
                    console.log("手机号为" + res.data.phoneNumber)
                },
                fail:function(err){
                    console.log(err);
                }
            })
    })
  }

获取手机号方法可选参数 

参数类型说明
phoneNumberString用户绑定的手机号(国外手机号会有区号)
purePhoneNumberString没有区号的手机号
countryCodeString区号

 后端返回的数据

获取得到的开放数据为以下 json 结构:

{
    "phoneNumber": "13580006666",
    "purePhoneNumber": "13580006666",
    "countryCode": "86",
    "watermark":
    {
        "appid":"APPID",
        "timestamp": TIMESTAMP
    }
}

🍓结束语🏆

       🍉 还有一些不如的地方大家可以指正,欢迎评论留言。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/405201.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

微信小程序获取当前的位置

微信小程序获取位置信息的方式有两种&#xff0c;一种是调用微信官方的接口来获取&#xff0c;如getLocation,这种方式只能获取经纬度 微信官方文档 https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.getLocation.html 另一种是使用的第三方平台的&#xff0…

Web前端 | HTML引入CSS样式的三种方式

✅作者简介&#xff1a;一位材料转码农的选手&#xff0c;希望一起努力&#xff0c;一起进步&#xff01; &#x1f4c3;个人主页&#xff1a;每天都要敲代码的个人主页 &#x1f525;系列专栏&#xff1a;Web前端 目录 一&#xff1a;CSS 1. CSS概述 2. HTML引入CSS样式的…

Vue2.0搭建脚手架(vue-cli)

目录 前言 一、npm安装 二、搭建脚手架 1.安装脚手架vue-cli 2.搭建项目 前言 vue大概内容&#xff1a; Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是&#xff0c;Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层&#xff0c;不仅易于上…

前端+后端项目 - 论坛信息管理系统(Web+servlet+MySQL+JDBC)

&#x1f91e;目录&#x1f91e; &#x1f496;一. 准备工作 &#x1f48e;1) 创建 web 项目 &#x1f48e;2) 创建目录结构 &#x1f48e;3) 配置 pom.xml &#x1f496;二. 数据库操作代码 &#x1f48e;1. 数据库设计 1.1 ER图 1.2 ER图转化为关系模型并优化 1.3 创…

(全网最详细!!)npm:无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称

文章目录问题概述一、分析原因二、解决办法1.安装node.js&#xff08;1&#xff09;下载并安装&#xff08;2&#xff09;配置环境&#xff08;3&#xff09;打开CMD&#xff0c;检查是否正常path路径是否正常。&#xff08;4&#xff09;安装完成后测试下nodejs和npm是否安装成…

前端js调用后端API获取数据的三种方法(2022.7.25)

前端js调用后台API获取数据的三种方法&#xff08;2022.7.25&#xff09;前言需求分析一个Get实例浏览器请求SoapUI软件请求一个Post实例浏览器请求SoapUI软件请求1、Http简介&#xff08;Browser / Server&#xff09;1.1 六个主流的浏览器1.2 HTTP请求&#xff08;Get & …

java后端+前端使用WebSocket实现消息推送

java后端前端使用WebSocket实现消息推送&#xff08;流程详细代码&#xff09;创建WebSocket的简单实例操作流程1.引入Websocket依赖2.创建配置类WebSocketConfig3.创建WebSocketServer4.websocket调用前端WebSocket连接OK,下课&#xff01;&#xff01;&#xff01;在项目的开…

【uploader】表格化自整理vue-simple-uploader的文档(超详细)

文章目录1.vue-simple-uploader介绍2.安装和配置3. 组件标签的文档整理3.1 uploader标签3.2 uploader-btn标签3.3 uploader-drop标签3.4 uploader-list标签3.5 uploader-file标签3.6 uploader-unsopport标签4.请求中的参数轮子的github链接&#xff1a;两个项目的文档要结合着看…

HTML可用于情侣表白的爱心代码~,赶紧跟着操作,让她也拥有属于你的爱心吧。

文章目录前言一、效果图二、操作步骤第一步第二步第三步第四步第五步第六步源码前言 最近随着电视剧《点燃我温暖你》的火热播出&#xff0c;剧中帅气学霸李洵的炫酷爱心代码也迅速火出了圈&#xff0c;爱心素材也异常火爆&#xff0c;我在这里整理了一份大家有需自取哦~ 可用于…

【React Router 6 快速上手一】重定向Navigate / useRoutes路由表 / 嵌套路由Outlet

前言 博主主页&#x1f449;&#x1f3fb;蜡笔雏田学代码 专栏链接&#x1f449;&#x1f3fb;React专栏 之前学习了react-router-dom5版本的相关内容 参考文章&#x1f449;&#x1f3fb;React路由&#xff08;详解版&#xff09;和 路由的模糊匹配&#xff0c;重定向以及嵌套…

vue安装及环境配置

目录 1.安装 Node.js 2.配置默认安装目录和缓存日志目录 3.配置环境变量 4.配置淘宝镜像 5.安装vue和脚手架 6.创建并运行项目 1.安装 Node.js Download | Node.js 在这里&#x1f446;下载的是最新版&#xff0c;如果要安装以前的版本&#x1f447;&#xff0c;页面往下…

3分钟让你学会axios在vue项目中的基本用法(建议收藏)

Axios酸狗来教你 提示&#xff1a;本篇详解axios在vue项目中的实例。在使用Vue.js框架开发前端项目时&#xff0c;会经常发送ajax请求服务端接口&#xff0c;在开发过程中&#xff0c;需要对axios进一步封装&#xff0c;方便在项目中的使用。 文章目录Axios酸狗来教你Axios简介…

JavaScript之正则表达式的使用方法详细介绍

目录 I. 序言&#xff1a;JavaScript中正则表达式的使用场景 II. 创建第一个正则表达式 III. 常见的正则表达式属性 &#x1f4d5; 三种匹配规则 &#x1f4d5; 五种常见属性 &#x1f4d5; 规则g的使用详解 IV. 常见的正则表达式方法举例介绍 &#x1f4d8; test方法 …

idea构建web项目-超详细教程

1、idea构建web项目 idea构建web项目的超级详细教程&#xff0c;一步一步来&#xff0c;完全没问题&#xff01; 1、新建一个空项目 2、新建java模块&#xff0c;名为webDemo1 3、选择webDemo1右键&#xff0c;选择Add Framework Support 选择Web Application 4、在WEB-…

Geeker-Admin项目跟做笔记(vue3+vite+pinia)

文章目录一、路由配置&#xff08;一&#xff09; 静态路由&#xff08;二&#xff09;动态路由二、axios的配置1. 创建axiosCancel.ts文件&#xff0c;用于有pending后直接取消2. axios封装3. 使用三、pinia仓库的使用四、Header 设计笔记1. 国际化&#xff08;中英文切换&…

【小程序开发】—— 封装自定义弹窗组件

文章目录&#x1f34b;前言&#xff1a;&#x1f34d;正文1、探讨需求封装popup自定义弹窗组件2、实战开发弹窗组件2.1 子组件内容 popup.vue文件2.2 父组件引用子组件3、效果图预览3.1 不使用具名插槽的原有样式效果3.2 使用具名插槽之后样式效果&#x1f383;专栏分享&#x…

快速掌握Nginx部署前端项目(从Nginx安装配置及部署都非常详细哦!)

前言&#xff1a; 之前在Linux系统中部署了后端项目&#xff0c;今天继续来给大家分享如何部署前端项目。 涉及到了Nginx的简单介绍以及Nginx如何安装及配置并且能够部署前端项目 Nginx是一个轻量级的反向代理web服务器&#xff0c;在当今应用地非常广泛&#xff0c;特别是前…

vue的proxy代理详解

一、proxy常用参数说明 module.exports {publicPath: "/",devServer: {proxy: {"/api": {// 代理名称 凡是使用/api开头的地址都是用此代理target: "http://1.2.3.4:5000/", // 需要代理访问的api地址changeOrigin: true, // 允许跨域请求pa…

[Node.js]如何在IDEA中配置Node.js

【目录】 一、下载Node.js 二、安装Node.js 三、配置Node.js 四、测试Node.js 一、下载Node.js 官网下载链接&#xff1a;Node.js 点击下图红色标注区域&#xff0c;即可下载msi文件 二、安装Node.js 打开msi文件 一路点击“Next”&#xff08;建议自定义文件安装路径&#xf…

vue3的基本使用(超详细)

一、初识vue3 1.vue3简介 2020年9月18日&#xff0c;vue3发布3.0版本&#xff0c;代号大海贼时代来临&#xff0c;One Piece特点&#xff1a; 无需构建步骤&#xff0c;渐进式增强静态的 HTML在任何页面中作为 Web Components 嵌入单页应用 (SPA)全栈 / 服务端渲染 (SSR)Jams…