微信小程序:最新微信登录授权并获取openid等信息

35岁的程序员 2018-10-23 13:59:29 ⋅ 200 阅读

简介

为优化用户体验,使用 wx.getUserInfo 接口直接弹出授权框的开发方式将逐步不再支持。从2018年4月30日开始,小程序与小游戏的体验版、开发版调用 wx.getUserInfo 接口,将无法弹出授权询问框,默认调用失败。

  • 小程序使用 button 组件,并将 open-type 指定为 getUserInfo 类型,获取用户基本信息。

  • 调用接口获取登录凭证(code)进而换取用户登录态信息,包括用户的唯一标识(openid) 及本次登录的 会话密钥(session_key)。

看效果



第一步:调用微信wx.login获取登录凭证code

wx.login(Object object)

调用接口获取登录凭证(code)。通过凭证进而换取用户登录态信息,包括用户的唯一标识(openid)及本次登录的会话密钥(session_key)等。用户数据的加解密通讯需要依赖会话密钥完成。

请求参数
Object object
属性  类型  默认值 是否必填    说明  支持版本
timeout number      否   超时时间,单位ms   >= 1.9.90
success function        否   接口调用成功的回调函数 
fail    function        否   接口调用失败的回调函数 
complete    function        否   接口调用结束的回调函数(调用成功、失败都会执行)    

返回结果
Object res

属性  类型  说明  支持版本
code    string  用户登录凭证(有效期五分钟)。开发者需要在开发者服务器后台调用 code2Session,使用 code 换取 openid 和 session_key 等信息
代码示例
wx.login({
  success (res) {    
   if (res.code) {      //发起网络请求      wx.request({        
       url: 'https://test.com/onLogin',        
       data: {          
           code: res.code        }      })    } else {      
       console.log('登录失败!' + res.errMsg)    }  } })

第二步:通过code 获取 openid 和 session_key

开发者服务器使用登录凭证 code 获取 session_key 和 openid。其中 session_key 是对用户数据进行加密签名的密钥。为了自身应用安全,session_key 不应该在网络上传输。
接口地址:
https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code

请求参数
参数  必填  说明
appid   是   小程序唯一标识
secret  是   小程序的 app secret
js_code 是   登录时获取的 code
grant_type  是   填写为 authorization_code

返回参数
参数  说明
openid  用户唯一标识
session_key 会话密钥
expires_in  过期时长(默认7200)

第三步:实现源码

getOpenId.wxml

<view class="userinfo">
  <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo" class="userinfo-btn"> 点击微信授权 </button>
  <block wx:else>
    <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
    <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  </block></view>

getOpenId.js

var app = getApp()
var userInfo = null; Page({  
globalData: {    
   appid: 'wx416xxxx16a0a1',//appid需自己提供,此处的appid我随机编写    secret: '5498fcab2xxxx5df26bf854ba89',//secret需自己提供,此处的secret我随机编写  },  
data: {    
   userInfo: {},    
   hasUserInfo: false,    
   canIUse: wx.canIUse('button.open-type.getUserInfo')  },  
onLoad: function () {    
   var that = this;    
   if (app.globalData.userInfo) {      
       this.setData({        
       userInfo: app.globalData.userInfo,        
       hasUserInfo: true      })    } else if (this.data.canIUse) {      // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回      // 所以此处加入 callback 以防止这种情况      app.userInfoReadyCallback = res => {        
   this.setData({          
       userInfo: res.userInfo,          
       hasUserInfo: true        })      }    } else {      // 在没有 open-type=getUserInfo 版本的兼容处理      wx.getUserInfo({        
       success: res => {          app.globalData.userInfo = res.userInfo          
           this.setData({            
               userInfo: res.userInfo,            
               hasUserInfo: true          })        }      })    }    
//登录凭证校验。通过 wx.login() 接口获得临时登录凭证 code 后传到开发者服务器调用此接口完成登录流程。    wx.login({      
       success: function (res) {        
       if (res.code) {          
       console.log("res.code:" + res.code);          
       var d = that.globalData;//这里存储了appid、secret、token串            var l = 'https://api.weixin.qq.com/sns/jscode2session?appid=' + d.appid + '&secret=' + d.secret + '&js_code=' + res.code + '&grant_type=authorization_code';          wx.request({            
           url: l,            
           data: {},            
           method: 'GET',            
           success: function (res) {              
               var obj = {};                  obj.openid = res.data.openid;              
               console.log("openid:" + obj.openid);              
               console.log("session_key:" + res.data.session_key);                obj.expires_in = Date.now() + res.data.expires_in;                wx.setStorageSync('user', obj);//存储openid            }          });        } else {          
           console.log('获取用户登录态失败!' + res.errMsg)        }      }    });  }  ,  
getUserInfo: function (e) {    
   console.log(e)    app.globalData.userInfo = e.detail.userInfo    
   this.setData({      
       userInfo: e.detail.userInfo,      
       hasUserInfo: true    })  } })

getOpenId.wxml

{  "navigationBarTitleText": "微信授权并获取OpenId"}

getOpenId.wxml

.userinfo {  
   display: flex;  
   flex-direction: column;  
   align-items: center;  
   background: #f0145a;  
   width: 100%;   height: 300rpx; }
.userinfo-btn{  
   margin-top: 50rpx;  
   background: none !important;  
   color: #fff !important;  
   font-size: 40rpx; }
.userinfo-avatar {  
   width: 108rpx;  
   height: 108rpx;  
   margin: 40rpx;  
   border-radius: 50%; }
.userinfo-nickname {  
   color: #fff; }

---------------END----------------

后续的内容同样精彩

长按关注“IT实战联盟”哦



全部评论: 0

    我有话说:

    程序商城(九):授权实现个人中心页面页面

    实现商城的授权获取用户信息和个人中心页面布局

    程序商城(七):动态API实现商品分类

    程序商品分类页面布局并且调用动态API获取数据加载

    程序抖音实战-首页(上)

    你也可以用程序编写一个抖音

    程序商城(一):https框架搭建实现导航功能

    本文将带领大家搭建https的程序框架,实现动态获取数据展示效果!

    程序电商实战-首页(上)

    上一篇:程序电商实战-入门篇 嗨,大家好!经过近两周的精心准备终于开始程序电商实战之路喽。那么最终会做成什么样呢?好了,不啰嗦了 我们先看首页长什么样吧!   首页效果图

    程序实现商品数量加减

    这是一个用程序原生代码实现的数量加减demo,主要是用于商品购物车或者商品详情修改数量使用

    程序电商实战-首页(下)

    上一篇:程序电商实战-首页(上)好了,上一期我们把首页搜索、导航栏和广告轮播给做完了,那么接下来会继续

    程序实战篇:基于wxcharts.js绘制移动报表

    程序图表插件(wx-charts)是基于canvas绘制,体积巧,支持图表类型饼图、线图、柱状图 ......

    程序电商实战-商品列表流式布局

    今天给大家分享一下程序中商品列表的流式布局方式,根据文章内容操作就可以看到效果哦~~~

    程序-Image的widthFix属性和rpm尺寸的使用

    在做程序的商品详情页,商品的详情是图片集合,渲染完成后发现图片加载的很不自然

    程序实战篇:如何解决https域名问题 ?

    开发自己的程序绕不开https问题,为了能在程序中调用我们自己的API服务请打开看一看吧!!!

    程序实战篇:商品属性联动选择(案例)

    本期的程序实战篇来做一个电商网站经常用到的-商品属性联动选择的效果,素材参考了一点点

    程序抖音实战-首页(下)

    抖音程序首页动态数据获取

    程序 - iconfont 图标字体

    你还在使用图片作为程序的图标?大猪告诉大家如何在程序上使用iconfont字体图标

    程序电商实战-购物车(上)

    好久没更新程序电商实战的文章了,是因为最近一直做整体架构调整,一些准备工作也是比较耗费时间的。在这几天将会有新版的 程序电商教程推出.......

    程序电商实战-入门篇

    程序开发工具有新版本更新啦!开发体验更好了,接下来一起为电商程序做一下准备前期准备工作~~

    程序电商实战-商品详情(上)

    先看一下今天要实现的程序商品详情页吧!

    程序营销之大转盘(二)

    第一个版本的大转盘都是用图片做的,奖品信息都是不无法修改的,说白了就是没啥实际用途,作者我就直接用canvas撸了一个全手工绘制的大转盘分享给大家