精华内容
下载资源
问答
  • 小程序登录获取用户信息及授权手机号方法

    万次阅读 热门讨论 2019-02-18 13:42:17
    小程序登录本篇记录讲解小程序登录手机号授权小结 本篇记录讲解 小程序登录,是现在小程序里面很普遍的一个功能,因为官方提供的方法,可以一键获取到用户信息,一键拿到手机号,本篇主要记录,本人开发小程序时,做...

    本篇记录讲解

    小程序登录,是现在小程序里面很普遍的一个功能,因为官方提供的方法,可以一键获取到用户信息,一键拿到手机号,本篇主要记录,本人开发小程序时,做登录过程中遇到的问题及解决方法)。

    小程序登录

    wxml:
    wxml注意事项:
    1.小程序的登录和获取用户信息是两部分!
    2.登录方法我写在app.js的onshow里面,因为可以保证小程序每次登录都可以拿到最新的用户信息。
    3.因小程序官方更新要求,现在获取用户信息,必须是主动触发去获取。
    4.主动触发的事件,必须绑定在标签上面才可以。(根据需求自己定义按钮位置)
    app.js登录代码如下:

       login: function () {//封装成方法,方便在小程序其他页面调用
          console.log("进入登录-------")
          var that = this;
          wx.login({ //微信官方登录方法
             fail: function (err) {
                console.log("login.fail", err);
             },
             complete: function (msg) {
                console.log("login.complete", msg);
             },
             success: function (loginInfo) {//登录成功,拿到第三方平台code
          //这里因为产品需求,调用了第三方平台的code,做了判断和保存
                that.globalData.loginInfo = loginInfo.code   //存取第三方平台code到公用数据字段
                if (wx.getExtConfig) {//第三方平台判断,具体不知道啥意思,API这么写的
                   wx.getExtConfig({ //确定第三方平台信息拿到,开始调用登录接口。
                      success: function (res) {
                         that.globalData.code = res.extConfig.code; //这个code是微信的code和第三方的code不一样。
                         wx.request({ //请求方式和参数,做过交互的一看就懂,不多BB
                            url: (that.globalData.server_root2 + "/v1/user/login"),
                            method: "POST",
                            header: {
                               'content-type': 'application/x-www-form-urlencoded'
                            },
                            data: {
                               wxcode: loginInfo.code,
                               code: res.extConfig.code 
                            },
                            success: function (result) {
                            //登录接口调用成功以后,会拿到两个参数
                            //1.用户的唯一标识(每个用户的唯一标识都不一样)
                            //2.sessionKey  ,每次登录的sessionKey 都不一样。
                            
                               var userInfo = {
                               //这是我自己定义的一个对象,这里面的数据是根据微信获取用户信息的格式来定义的,
                               方便做获取用户信息的时候,获取的数据存储位置统一。
                                  //生日
                                  birthday: result.data.data.birthday,
                                  //性别 0未知 1男 2女
                                  gender: result.data.data.gender,
                                  //用户头像
                                  head_photo: result.data.data.head_photo,
                                  //用户微信昵称
                                  nick_name: result.data.data.nick_name,
                                  // 真实姓名
                                  real_name: result.data.data.real_name,
                               };
           
                            }
                         });
                      }
                   })
                }
             }
          })
       },
    

    登录成功以后-------获取用户信息

    wxml部分:

    <!--严格标准,不要写错了,--open-type一定要写>
       <button lang="zh_CN" open-type="getUserInfo" bindgetuserinfo="onGotUserInfo" class='butn'></button>
    

    js部分:

      //获取用户信息
       onGotUserInfo: function (e) { //获取用户信息方法,注意一定要取到 "e"
          var that = this
          var wxUserInfo = e.detail.userInfo;  
          var cacheUserInfo = wx.getStorageSync("userInfo");
    //获取用户信息,只要根据自己需求单独存起来就好了。
          var userInfo = {};
          userInfo.head_photo = wxUserInfo.avatarUrl;
          userInfo.nick_name = wxUserInfo.nickName;
          userInfo.gender = wxUserInfo.gender;
          userInfo.country = wxUserInfo.country;
          userInfo.country = wxUserInfo.city;
          userInfo.country = wxUserInfo.province;
          that.setData({
             user_info: userInfo
          })
       },
    

    小结:至此,登录和获取用户信息,就介绍完了,在这其中,因为方便小程序能拿到用户信息。
    做了好多按钮的摆放,最后选择了透明遮罩,如有好的方法,请告知

    手机号授权

    手机号授权,也是现在小程序用到的功能比较多的,奈何官方的API太过言简意赅。下面就讲讲
    我在获取手机号的时候遇到的坑,和注意事项。望大家带好笔记记录。先来看代码
    wxml部分:

    <!--手机号事件的授权必须绑定在子button按钮上-->
            <button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">获取手机号</button>
    

    js部分:

       //注册会员按钮并获取手机号
       getPhoneNumber: function (e) {//这个事件同样需要拿到e
          var that = this
          var ency = e.detail.encryptedData;
          var iv = e.detail.iv;
          var errMsg = e.detail.errMsg
          if (iv == null || ency == null) {
             wx.showToast({
                title: "授权失败,请重新授权!",
                icon: 'none',
             })
             return false
          }
          //把获取手机号需要的参数取到,然后存到头部data里面
          that.setData({
             ency: ency,
             iv: iv,
             errMsg: errMsg
          })
    
          that.zhuce();//调用手机号授权事件
       },
    
    
    //手机号授权事件
    //这里提及几个注意事项:
    //1.获取手机号之前,是需要进行登录的,因为必须保证,用户的登录是最新的登录状态
    //才能拿到他的最新的sessionKey,这样授权的时候才不会有问题。
    //我进入的坑:
    //1.之前开发就是因为sessionKey,是我登录的时候存的缓存,导致,只有第二次授权才能成功,第二次授权是重新登录的,
    //并且重新拿到的sessionKey,此坑慎入。
       zhuce: function (e) {
          var that = this;
          var ency = that.data.ency;
          var iv = that.data.iv;
          var errMsg = that.data.errMsg;
          var loginInfo = app.globalData.loginInfo
          //判断登录状态
      wx.checkSession({  
             success: function () {
                if (wx.getExtConfig) {
                   wx.getExtConfig({
                      success: function (res) {
                         var rescode = res.extConfig.code
                         //我的sessionKey是写在app.js的onshow里面的,每次进入小程序都需要重新登录,
                         //获取到最新的sessionKey保存到缓存里,用的时候取出来
                         //所以可以确定,每次进入都是最新的sessionKey
                         var sessionKey = wx.getStorageSync("sessionKey")
                         wx.request({
                            method: "POST",
                            url: (app.globalData.server_root2 + "/v1/user/getPhoneNumber"),
                            data: {
                               encrypdata: ency,
                               ivdata: iv,
                               sessionKey: sessionKey
                            },
                            success: function (res) {
                               if (res.data.code != 200) {
                                  wx.showToast({
                                     title: res.data.message,
                                     icon: 'none',
                                  })
                                  return;
                               }
    
                            }
                         });
                      }
    
                   })
                }
             },
             fail: function () {//如果失败,就重新登录,并且重新获取手机号
                //登录
                wx.login({
                   fail: function (err) {
    
                   },
                   complete: function (msg) {
    
                   },
                   success: function (loginInfo) {
                      if (wx.getExtConfig) {
                         wx.getExtConfig({
                            success: function (res) {
                               var rescode = res.extConfig.code
                               wx.request({
                                  method: "POST",
                                  url: (app.globalData.server_root2 + "/v1/user/getPhoneNumber"),
                                  data: {
                                     encrypdata: ency,
                                     ivdata: iv,
                                     sessionKey: app.globalData.sessionKey
                                  },
                                  success: function (res) {
                                     if (res.data.code != 200) {
                                        wx.showToast({
                                           title: res.data.message,
                                           icon: 'none',
                                        })
                                        return;
                                     }
                                  }
                               });
    
                            },
    
                         })
                      }
                   }
                })
    
             }
          })
    
    
       },
    

    小结

    以上就是小程序登录获取用户信息,已经授权手机号的流程和注意事项,这里我一直提及的有几个重点,
    都是不容一被发现,却能导致程序失败的小问题,第一就是不管是获取用户信息,和授权手机号,必须
    是登录成功以后。第二就是这两个事件必须绑定在标签上面。第三就是必须保证sessionKey
    是登录以后拿到的最新的,不然授权手机号存在问题。谨记

    展开全文
  • 小程序登录逻辑

    2020-11-06 01:35:02
    小程序登录逻辑 前言:鉴于小程序的限制,不能强制用户刚进小程序就登录,用户需要浏览一定的业务

    小程序登录逻辑

    前言:鉴于小程序的限制,不能强制用户刚进小程序就登录,用户需要浏览一定的业务后,才能引导用户进行登录。
    小程序登录流程
    1,调用 wx.login() 获取 临时登录凭证code ,并携带code向开发者服务器上发起请求,拿到token及其他所需的相关业务信息

    其中 wx.login() => code =>(携带code发起请求)=>得到token的处理流程,见下图:
    在这里插入图片描述
    说明:
    调用 wx.login() 获取 临时登录凭证code ,并回传到开发者服务器。
    调用 auth.code2Session 接口,换取 用户唯一标识 OpenID 和 会话密钥 session_key。
    之后开发者服务器可以根据用户标识来生成自定义登录态,用于后续业务逻辑中前后端交互时识别用户身份。

    注意:

    会话密钥 session_key 是对用户数据进行 加密签名 的密钥。为了应用自身的数据安全,开发者服务器不应该把会话密钥下发到小程序,也不应该对外提供这个密钥。
    临时登录凭证 code 只能使用一次

    官方的处理流程:

    依据官方流程图涉及了三个端: 微信小程序客户端 ,开发者服务器,微信服务器端
    1,客户端使用 wx.login() 获取 临时登录凭证code,然后通过wx.request将code发送到开发者服务器;
    2,开发者服务器 凭借用户的Appid,appsecret和code从 微信服务器 获取session_key(本次会话密钥)和openid;
    3,开发者服务器 根据获取到的 session_key(本次会话密钥)和openid 这两个信息定义用户的登录状态,并且将用户的自定义登录状态(即token)返回给用户端;
    4,客户端 将 开自定义状态(token)存入缓存中,用户端 可携带自定义状态发起业务请求
    5,开发者服务器 通过自定义状态 查询 openid和session_key,并返回 客户端 业务数据。

    1,调用 wx.login() 获取 临时登录凭证code ,并携带code向开发者服务器上发起请求,拿到token,userinfor,及 用户真假状态,将这三个值存入缓存中
    2,判断真假状态(真假状态根据后端返回的数据,也可判断是否有userinfor),如果是假,即为新用户,我们可以调起登录弹窗,提醒用户登录;如果为真,即为老用户,不用登录,继续业务逻辑即可;
    3,在调取登录弹窗时,需要重新调用wx.login(),获取新的code,因为code具有时效性且只能使用一次;
    4,用户点击确认授权登录后,将得到用户信息,iv,及encryptedData,更新缓存里的用户信息;并根据接口返回的状态,更新真假状态,如果接口调取成功,状态即为真,反之则为假。

    以上便是一次完整的用户授权过程

    ps:若token过期,重新wx.login() => code =>(携带code发起请求)=>得到token,更换缓存里的token即可。
    展开全文
  • 微信小程序登录 php后台

    万次阅读 2019-08-26 11:02:38
    微信小程序登录以及获取openid(用户唯一标识)和session_key 一、前端登录代码: //登录获取code login:function(){ wx.login({ success:function(res){ console.log(res.code) //发送请求 wx.request({ .....

    微信小程序登录以及获取openid(用户唯一标识)和session_key

    一、前端登录代码:

      //登录获取code
      login:function(){
        wx.login({
          success:function(res){
            console.log(res.code)
            //发送请求
            wx.request({
              url: '填写你的后端接口地址', //接口地址
              data: {code:res.code},
              header: {
                'content-type': 'application/json' //默认值
              },
              success: function (res) {
                console.log(res.data)
              }
            })
          }
        })
      }
    

    二、后端接收code,获取openid和session_key

    /**
    	 * 登录
    	 */
    	public function login(){
    		$code = $_GET['code'];
    		$appid = '修改成你小程序的APPID';
    		$AppSecret = '修改成你小程序的APPSECRET';
    		$url = "https://api.weixin.qq.com/sns/jscode2session?appid=".$appid."&secret=".$AppSecret."&js_code=".$code."&grant_type=authorization_code";
            $str = file_get_contents($url);
            $json = json_decode($str);
            $arr = get_object_vars($json);
    	    echo $openid = $arr['openid']; //这是openid
    	    echo '</br>';
    	    echo $session_key = $arr['session_key']; //这是session_key
    	}
    

    三、这样你就获取到你需要的openid了,最好获取到openid以后存进数据库,避免重复获取

    四、谢谢,再见

    展开全文
  • 小程序登录教程

    2019-07-30 09:43:00
    以下为小程序登录分析: 小程序的登录流程:(在App.js中onlunch生命周期中) 1、调用wx.login()获取code 2、调用wx.request发送code到我们的服务器(我们自己的服务器会返回一个登录态的标识,比如token 3、将登录...

    以下为小程序登录分析:
    小程序的登录流程:(在App.js中onlunch生命周期中)
    1、调用wx.login()获取code
    2、调用wx.request发送code到我们的服务器(我们自己的服务器会返回一个登录态的标识,比如token
    3、将登录态的标识token进行存储,以便下次使用
    4、请求需要登录态标识的接口时,携带token

    以下为基本的js代码:
    const TOKEN=‘token’
    App({
    //定义全局变量
    globalData: {
    url: ‘http://***’,
    userInfo: null,//初始化是获取用户信息
    token: ‘’,//这是判断用户登录态的令牌,与后台交互的钥匙,登录授权后,由后台发放
    //得到后存储在Storage

    },
    onLaunch: function () {
    //为了防止每次用户使用小程序时都登录,一开始应该先去检验token是否存在或者过期
    //1、先从缓存中取出token
    const token = wx.getStorageInfoSync(TOKEN)
    //2、判断token是否存在
    if(token && token!==0){
    //已经有token,需要验证token是否过期
    //验证token是否过期,将验证方法放入一个封装的函数中
    this.check_token(token);
    console.log(‘执行检验操作’);
    }
    else{
    //没有token,进行登录操作
    this.login();
    console.log(‘执行登录操作’);
    }
    },

    //检验token的函数
    check_token(token){
    console.log(‘执行检验操作’);
    wx.request({
    url: ‘http://***’,
    method:‘post’,
    header:{
    token,
    ‘content-type’: ‘application/x-www-form-urlencoded’,
    },
    success:(res)=>{
    if (res.data.code == 600){
    console.log(‘token有效’);
    this.globalData.token=token;
    console.log(this.globalData.token);
    }
    else{
    console.log(‘执行登录操作’);
    this.login();
    }
    console.log(res);
    },
    fail:function(err){
    console.log(err)
    }
    })
    },
    login(){//自己定义的login()方法
    //登录操作
    console.log(‘执行登录操作’);
    wx.login({
    success: (res) => {
    //1、获取code
    var code = res.code;
    var userName = “”;
    //2、将code发送给服务器
    wx.request({
    url: ‘http://***’,
    method: ‘post’,
    data: {
    code: code,
    userName: userName
    },
    header: {
    ‘content-type’: ‘application/x-www-form-urlencoded’,
    },
    success: (res) => {
    console.log(res)
    //1、取出token
    const token = res.data.data;
    //2、将token保存在globalData中
    this.globalData.token = token;
    //此时的token已经存储在了globaldata这个对象的token中了,但是对象在用户关闭小程序时会被回收,意味着token也会被回收,这样用户在下次使用这个小程序时还要继续登录,为了解决这个问题,我们应该进行本地保存

    //3、进行本地存储
    wx.setStorageSync(TOKEN, token)//这个方法时同步的,执行完这个函数之后才能继续执行下面的
    }
    })
    }
    })
    }
    })

    展开全文
  • 小程序登录流程、代码展示
  • 小程序登录流程

    千次阅读 2019-04-11 18:51:45
    目录 1 登录流程时序图 2 wx.login(Object object) 2.1 使用案例 ...5 小程序登录 1 登录流程时序图 从登录时序图来看,我们需要通过wx.login()来获取code,然后把获取到的code以...
  • 在开发中会遇到各种问题,今天把小程序登录这块的流程整理下,做个记录。 小程序的登录跟平时自己APP这种登录验证还不太一样,多了一个角色,那就是微信服务器。 根据微信官方提供的登录流程时序图可以清楚的了解...
  • 微信小程序登录注册界面

    万次阅读 2019-06-02 21:55:21
    微信小程序登录注册界面 第一次接触微信小程序的开发,首先就是从前端的界面开始,我要做的是一个农场管理的微信小程序,大致包括登录、注册、主要功能界面这些,这里我就分享一下我的登录注册界面的设计和功能实现...
  • 文章目录小程序登录代码1、小程序登录的wxml代码2、小程序登录的wxss代码3、小程序js代码注册后端代码1、UserService的登录接口2、UserServiceImpl实现类3、controller代码 小程序登录代码 1、小程序登录的wxml...
  • 微信小程序登录的实现 开发微信小程序必然会涉及到登录功能的实现,不同的技术团队对微信小程序登录实现的方法也不相同,以下是我做过的微信小程序登录实现思路。 前端在微信小程序的入口方法中通过wx.login()方法...
  • 微信小程序登录流程 客户端获得code值,并将code传给第三方服务端 微信小程序客户端调用wx.login,获取登录凭证(code),并调用接口,将code发送到第三方客户端 第三方服务端用code换session_key和openid 小...
  • 微信小程序登录 1调用 wx.login() 获取 临时登录凭证code ,并回传到开发者服务器。 2调用 auth.code2Session 接口,换取 用户唯一标识 OpenID 和 会话密钥 session_key。 企业微信登录 UnionID 机制...
  • 支付宝小程序登录PHP

    2020-02-05 17:17:08
    支付宝小程序登录PHP 时序图(现在有所改变,可以直接看后面的一部分,前面在爬坑) 前言 采用TP5.1的框架实现,我知道这里会有很多的坑,在开发这个之前,我就写了两篇前奏,因为这个登录需要一些参数,这个和微信...
  • SpringBoot实现微信小程序登录微信小程序登录流程登录流程图前端代码后端代码 微信小程序登录流程 微信小程序官方文档:微信小程序官方文档 第一次学习微信小程序的登录,以前也好奇微信小程序的授权登录是怎么实现的...
  • 微信小程序登录功能实现

    千次阅读 2019-08-09 11:00:23
    微信小程序登录功能实现记录
  • 有没有大神知道小程序登录接口调好了 ,开发者工具能登,但是在真机上登不进去,然后在开发者工具上登一次 真机上就可以了
  • 在微信(或企业微信)中登录小程序,可以分为两种: 第一种是使用微信授权登录, 第二种使用账号密码登录(如某些非开放的系统); 一、使用微信登录小程序 微信中调用wx.login()(企业微信中调用wx.qy.login())...
  • 微信小程序登录与授权 很多人会把微信小程序的登录和授权搞混淆。 登录 其实微信小程序的登录作用就跟传统的帐号密码登录一样,只是不用用户手工输入帐号密码。 小程序登录过程分两个阶段: 小程序向开发者服务器...
  • 微信小程序登录授权

    2020-08-11 23:59:52
    微信小程序登录授权 1、 获取用户信息 通过微信的按钮button 的开放能力进行授权 // 复制代码 <button type=" primary" open-type="getuserInfo" bindgetuserinfo=" getuserInfo" >微信授权登录 </button&...
  • 首先,简单介绍下小程序登录的几个步骤。 1、点击登录按钮 2、获取微信sessionKey数据 ​ 1)调用 wx.login() 获取 临时登录凭证code ,并回传到开发者服务器。 ​ 2)调用 auth.code2Session 接口,换取 用户唯一...
  • 微信小程序 登录过程

    千次阅读 2017-03-10 10:30:44
    微信小程序 登录过程本文由笔者自己经验所得,不妥之处还望指教: 微信代码 php后端代码 流程 小程序请求code 小程序请求encryptedData 后端请求session_key 后端解密 小程序收到解密后的数据 小程序请求code wx....
  • PHP实现微信小程序登录

    万次阅读 2019-01-07 10:05:37
    小程序登录:https://developers.weixin.qq.com/miniprogram/dev/api/wx.login.html 服务端对小程序登录的处理:https://www.easywechat.com/docs/master/mini-program/auth 准备工作: 1.服务端使用composer安装...
  • 在分析小程序登录机制之前,需要明确几个问题: 1. 微信小程序是什么 2. 微信公众平台、微信开放平台以及商户平台的区别 3. 微信openid与unionid的区别 4. 小程序unionid的机制 1. 小程序是什么 官方给出的解释...
  • 微信小程序登录Java后台接口

    千次阅读 多人点赞 2018-10-11 15:40:28
    微信小程序登录java后台接口 首先看一下微信小程序的开发文档: 微信小程序开发文档 步骤: 一级标题 二级 三级 表头 表头 表头 内容 内容 内容 内容 内容 内容 ...
  • 小程序登录与否判断 小程序如果每次使用都需要用户登录势必会使用户体验感降低,如何进行判断用户是否登录了,很简单,只要调用一个API就行了 在小程序登录后的第一个page中的index.js文件的onLoad方法中加上如下...
  • UNI-APP小程序登录功能

    万次阅读 2019-06-21 11:03:24
    小程序登录逻辑 ①通过uni.login()接口获取小程序用户的code值 uni.login({ success(res) { // // {errMsg: "login:ok", code: "033vPJhy1W2RH906Y0gy1B5Chy1vPJhO"} console.log(res) if (res....
  • 微信小程序登录思路及代码 因为项目要求要做微信小程序的登录功能,因为比较繁琐所以记录一下笔记,梳理一下思路 思路 当用户点击个人主页或者购买物品收藏物品的时候往往都需要验证个人信息,比如提交订单要确定是...
  • 微信小程序登录(java springboot)

    万次阅读 2019-02-27 12:29:43
    简单介绍微信小程序登录的实现。 2. 重要说明 由于之前做微信网页授权登录,容易被之前的思路误导。 微信小程序登录流程如官网图片: 需要说明的就是,获得用户信息并不是后端再次提交数据给微信端,获得用户信息,...
  • 小程序登录 小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识,快速建立小程序内的用户体系。 登录流程时序 说明: 调用wx.login()获取临时登录凭证code,并回传到开发者服务器。 调用...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 14,534
精华内容 5,813
关键字:

小程序登录