开发接口

登录

wx.login

wx.checkSession

签名加密

小程序登录

小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识,快速建立小程序内的用户体系。

登录流程时序

小程序,开发者服务器,微信接口服务

wx.login()获取code

wx.request()发送code

登录凭证校验接口

appid+appsecret+code

session_key+openid等

自定义登录

与openid,session_key关联

微信登录授权:

wx.authorize

提前向用户发起授权请求,调用后会立刻弹窗询问用户是否同意授权小程序使用某项目功能或获取用户的某些数据,但不会实际调用对应的接口,如果用户之前就已经同意授权,则不会出现弹窗。

<button open-type="getUserInfo"></button>

userInfo参数说明:

nickName

avatarUrl

gender

city

province

country

language

wx.login({
success (res) {
if (res.code) {
//发起网络请求
wx.request({
url: 'https://test.com/onLogin',
data: {
code: res.code
}
})
} else {
console.log('登录失败!' + res.errMsg)
}
}
})

wx.checkSession(Object object)

检查登录态是否过期。

wx.checkSession({
success () {
//session_key 未过期,并且在本生命周期一直有效
},
fail () {
// session_key 已经失效,需要重新执行登录流程
wx.login() //重新登录
}
})

wx.getUserInfo(Object object)

获取用户信息。

// 必须是在用户已经授权的情况下调用
wx.getUserInfo({
success: function(res) {
var userInfo = res.userInfo
var nickName = userInfo.nickName
var avatarUrl = userInfo.avatarUrl
var gender = userInfo.gender //性别 0:未知、1:男、2:女
var province = userInfo.province
var city = userInfo.city
var country = userInfo.country
}
})
<!-- 如果只是展示用户头像昵称,可以使用 <open-data /> 组件 -->
<open-data type="userAvatarUrl"></open-data>
<open-data type="userNickName"></open-data>
<!-- 需要使用 button 来授权登录 -->
<button wx:if="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">授权登录</button>
<view wx:else>请升级微信版本</view> Page({
data: {
canIUse: wx.canIUse('button.open-type.getUserInfo')
},
onLoad: function() {
// 查看是否授权
wx.getSetting({
success (res){
if (res.authSetting['scope.userInfo']) {
// 已经授权,可以直接调用 getUserInfo 获取头像昵称
wx.getUserInfo({
success: function(res) {
console.log(res.userInfo)
}
})
}
}
})
},
bindGetUserInfo (e) {
console.log(e.detail.userInfo)
}
})

小程序登录

const app = getApp()

Page({
data: {
},
onLoad: function(params) { },
// 登录
doLogin: function(e) {
console.log(e.detail.errMsg)
console.log(e.detail.userInfo)
console.log(e.detail.rawData) wx.login({
success (res) {
if (res.code) {
//发起网络请求
wx.request({
url: 'https://test.com/onLogin',
data: {
code: res.code
}
})
} else {
console.log('登录失败!' + res.errMsg)
}
}
}) }
})
<view>
<button class="goRegistBtn" type="warn" open-type='getUserInfo' bindgetusrinfo="doLogin">微信登录</button>
</view>

wx.getUserInfo(Object object)

App({
serverUrl: "",
userInfo: null, setGlobalUserInfo: function(user) {
wx.setStorageSync("userInfo", user);
}, getGlobalUserInfo: function() {
return wx.getStorageSync("userInfo");
}, })

获取微信session_key和secret


请点赞!因为你的鼓励是我写作的最大动力!

吹逼交流群:711613774

微信小程序微信登录的更多相关文章

  1. php(ThinkPHP)实现微信小程序的登录过程

    源码也在我的github中给出 https://github.com/wulongtao/think-wxminihelper 下面结合thinkPHP框架来实现以下微信小程序的登录流程,这些流程是结 ...

  2. 使用Shiro+JWT完成的微信小程序的登录(含讲解)

    使用Shiro+JWT完成的微信小程序的登录 源码地址https://github.com/Jirath-Liu/shiro-jwt-wx 微信小程序用户登陆,完整流程可参考下面官方地址,本例中是按此 ...

  3. 完整微信小程序授权登录页面教程

    完整微信小程序授权登录页面教程 1.前言 微信官方对getUserInfo接口做了修改,授权窗口无法直接弹出,而取而代之是需要创建一个button,将其open-type属性绑定getUseInfo方 ...

  4. 微信小程序+微信管理后台+微信用户前台

    代码地址如下:http://www.demodashi.com/demo/15043.html #### 微信小程序+微信管理后台+微信用户前台 #### 产品介绍 基础功能开发:景区微信地图导游.天 ...

  5. 微信小程序—微信自动退款

    微信小程序—微信自动退款 一.业务背景 微信自动退款串接基于酷客多小程序商城系统,为方便财务人员进行订单退款而开发,将酷客多小程序系统财务退款流程和微信退款系统打通.实现一个系统管理运营. 二.业务流 ...

  6. 微信小程序-微信自动退款(Java后台)

    微信小程序-微信自动退款 1.首先分享 微信自动退款接口: https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=9_4 微信付款 代码案例 ...

  7. 微信小程序之登录态维护(十一)

    [未经作者本人同意,请勿以任何形式转载] >什么是登录态? 所谓登录态,就是程序在运行时,能够识别当前用户,能够证明自己的唯一性且合法. 我们知道,WEB服务器通过浏览器携带的cookie获取s ...

  8. 微信小程序维护登录态与获取用户信息

    前言. 微信小程序的运行环境不是在浏览器下运行的.所以不能以cookie来维护登录态.下面我就来说说我根据官方给出的方法来写出的维护登录态的方法吧. 一.登录态维护 官方的文档地址:https://m ...

  9. 使用uni-app开发微信小程序之登录模块

    从微信小程序官方发布的公告中我们可获知:小程序体验版.开发版调用 wx.getUserInfo 接口,将无法弹出授权询问框,默认调用失败,需使用 <button open-type=" ...

  10. 微信小程序之登录

    微信小程序登录基本流程就是 1. wx.login获取js_code 根据app_id, secret, js_code 数据 wx.request 获取用户的openid和session_key   ...

随机推荐

  1. webpack4打包报错ERROR in multi ./src/main.js dist/bundle.js

    webpack打包测试: 上边将mode01.js模块及main.js主文件编写完成,下边使用webpack对这些js文件进行打包 1.进入程序目录,执行webpack main.js build.j ...

  2. SQL Server 截取日期部分字符

    select GetDate() --用DateName()就可以获得相应的年.月.日 Select Datename(year,GetDate())+'-'+Datename (month,GetD ...

  3. Windows Server 2012 R2安装部署Office Web Apps Server

    微软官方参考地址https://technet.microsoft.com/zh-cn/library/jj219455.aspx,建议参考官方说明. 注意:每一步进行完成后重启服务器!!! 一.   ...

  4. Python学习日记(十五) collections模块

    在内置函数(dict.list.set.tuple)的基础上,collections模块还提供了几个其他的数据类型:Counter.deque.defaultdict.namedtuple和Order ...

  5. Mybatis中传递多个参数的方法总结

    一.单个参数: public List<XXBean> getXXBeanList(String xxCode); <select id="getXXXBeanList&q ...

  6. CSS3 颜色渐变、阴影、渐变的阴影

    css阴影: 外阴影:box-shadow:X Y Npx #color; 内阴影:box-shadow:inset X Y Npx #color; 文字阴影:text-shadow:X Y Npx ...

  7. django配置*app*登录案例*orm简用

    1.静态文件的配置和使用 1.静态文件的配置和使用 没有css样式: 添加样式 结果: <html lang="en"> <head> <meta c ...

  8. Android AIDL使用详解_Android IPC 机制详解

    一.概述 AIDL 意思即 Android Interface Definition Language,翻译过来就是Android接口定义语言,是用于定义服务器和客户端通信接口的一种描述语言,可以拿来 ...

  9. abp学习(四)——根据入门教程(aspnetMVC Web API进一步学习)

    Introduction With AspNet MVC Web API EntityFramework and AngularJS 地址:https://aspnetboilerplate.com/ ...

  10. react native 手动打包jsbundle文件

    1 在项目目录/android/app/src/main下建一个文件夹assets 2 react-native bundle --platform android --dev false --ent ...