返回顶部
首页 > 资讯 > 前端开发 > JavaScript >微信小程序登录方法之授权登陆及获取微信用户手机号
  • 587
分享到

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

2024-04-02 19:04:59 587人浏览 泡泡鱼
摘要

目录先看一下小程序的登陆流程第一步, 调用微信登陆方法 wx.login() 获取临时登录凭证code ,并回传到开发者服务器。​​​​​第二步,获取用户信息,点击事件,获

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

 使用说明注意:

    调用 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
    }
}

结束语

到此这篇关于微信小程序登录方法之授权登陆及获取微信用户手机号的文章就介绍到这了,更多相关微信小程序授权登陆及获取手机号内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: 微信小程序登录方法之授权登陆及获取微信用户手机号

本文链接: https://lsjlt.com/news/165077.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 微信小程序登录方法之授权登陆及获取微信用户手机号
    目录先看一下小程序的登陆流程第一步, 调用微信登陆方法 wx.login() 获取临时登录凭证code ,并回传到开发者服务器。​​​​​第二步,获取用户信息,点击事件,获...
    99+
    2024-04-02
  • 微信小程序中如何获取用户手机号授权登录
    随着微信小程序的普及,许多应用程序需要用户登录才能提供更好的服务。而获取用户手机号码是验证用户身份和确保账户安全的重要步骤之一。因此,在本文中,我们将介绍如何在微信小程序中实现手机号授权登录。 步骤一:在小程序后台添加手机号授权 首先,在小...
    99+
    2023-08-17
    微信小程序 小程序 前端 javascript vue.js
  • 【微信小程序开发】小程序微信用户授权登录(用户信息&手机号)
    🥳🥳Welcome Huihui's Code World ! !🥳🥳 接下来看看由辉辉所写的关于小程序的相关操作吧 目录 🥳🥳Welc...
    99+
    2023-10-26
    小程序 微信小程序 微信 1024程序员节
  • 微信小程序结合ThinkPHP5授权登陆后获取手机号
    在我们授权登陆后会获取到用户的 sessionKey 这个是获取手机号不可分割的一部分 上代码 wxml: <button open-type="getPhoneNumber" bindgetphonenumber="getPho...
    99+
    2015-12-07
    小程序 获取手机号 小程序 ThinkPHP5获取手机号
  • 微信小程序实现授权登录之获取用户信息
    本文实例为大家分享了微信小程序实现获取用户信息的具体代码,供大家参考,具体内容如下 小程序登录 小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识,快速建立小程序内...
    99+
    2024-04-02
  • 微信小程序登录及获取手机号码
    前端:微信先授权登录后再授权获取手机号码 后端:先微信登录获取openid返回前端,前端再传递手机号码code给后端获取手机号码并在本地数据量注册用户信息,需提供2个接口 第一步:先通过code微信授权登录获取openid $url = '...
    99+
    2023-08-31
    微信小程序 php
  • 微信小程序用户授权获取手机号(getPhoneNumber)
    前言 小程序有一个获取用户很便捷的api,就是通过getPhoneNumber获取用户的已经绑定微信的手机号码。有一点要大家注意,现在微信和注重用户体验,有些方法都是需要用户主动去触...
    99+
    2024-04-02
  • 基于Thinkphp5+EasyWeChat+fastadmin微信小程序授权登录&获取手机号&微信公众号网页---联合授权登录
    战前准备 使用 composer 安装 EasyWeChat $ composer require overtrue/wechat:~4.0 -vvv 或者在composer.json文件renqui...
    99+
    2023-09-12
    php
  • 微信小程序如何结合ThinkPHP5授权登陆后获取手机号
    这篇文章给大家分享的是有关微信小程序如何结合ThinkPHP5授权登陆后获取手机号的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。在我们授权登陆后会获取到用户的 sessionKey 这个是获取手机号不可分割的一部...
    99+
    2023-06-25
  • 微信小程序实现授权登录之怎么获取用户信息
    这篇文章主要讲解了“微信小程序实现授权登录之怎么获取用户信息”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“微信小程序实现授权登录之怎么获取用户信息”吧!小程序登录小程序可以通过微信官方提供的...
    99+
    2023-06-30
  • 【微信授权登录】uniapp开发小程序,实现获取微信授权登录功能
    一、解题思路: 微信授权登录(获取用户信息) 1.先获取用户信息——用户授权允许后,通过调用uni.login 可以获取到code。 2.拿着获取到的code去调用——登录接口,可以获取到token。 3.把token存入缓存。就可以在页面...
    99+
    2023-08-16
    小程序 微信 javascript
  • 微信小程序授权登录
    微信小程序—授权登录 一、小程序登录 登录流程时序 说明: 1.小程序端调用 wx.login() 获取临时登录凭证code ,并回传到开发者服务器。 2.服务器调用 code2Session 接口,换取 用户唯一标识 OpenID 和 ...
    99+
    2023-09-01
    微信小程序 小程序 微信 授权登录
  • 微信小程序开发之用户授权登录的方法
    这篇文章将为大家详细讲解有关微信小程序开发之用户授权登录的方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。准备:微信开发者工具下载地址:https://developers.weixin.qq.com/...
    99+
    2023-06-14
  • 微信小程序用户如何授权获取手机号-getPhoneNumber
    本篇内容主要讲解“微信小程序用户如何授权获取手机号-getPhoneNumber”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“微信小程序用户如何授权获取手机号-getPhoneNumber”吧!...
    99+
    2023-06-13
  • 微信小程序如何开发用户授权登陆
    这篇文章主要介绍了微信小程序如何开发用户授权登陆,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。准备:微信开发者工具下载地址:https://...
    99+
    2024-04-02
  • 微信小程序如何授权登录
    小编给大家分享一下微信小程序如何授权登录,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!注:没有在微信开放平台做开发者资质认证的就...
    99+
    2024-04-02
  • 怎么授权登录微信小程序
    本篇文章为大家展示了怎么授权登录微信小程序,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。授权登录的基本流程上图是微信小程序官网提供的授权登录基本流程图,这里我只从前端开发的角度来讲解一下该流程。通过...
    99+
    2023-06-08
  • springboot+jwt+微信小程序授权登录获取token的方法实例
    目录前言配置XcxAuthenticationProviderXcxAuthenticationToken小程序授权登录前言 我们有时候在开发中,遇到这样的问题,就是我们需要小程序授...
    99+
    2024-04-02
  • 如何实现微信小程序之授权登录
    这篇文章主要介绍如何实现微信小程序之授权登录,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!1.实现思路自己写一个微信授权登录页面让用户实现点击的功能,也就是实现了通过 button 组件去触发 getUserInof...
    99+
    2023-06-14
  • uniapp开发小程序,实现获取【微信授权登录】功能
    APP微信授权登录需要到微信开放平台申请,在HBuilderX配置APP SDK中微信登录的appId,另外需要跟小程序、公众号授权账号互通的话也需要在微信开放平台申请 1、在微信公众平台申请应用,获取相应的appid和appsecret ...
    99+
    2023-09-28
    uni-app 小程序 微信
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作