精华内容
下载资源
问答
  • 微信小程序登陆

    2019-06-25 02:31:15
    微信小程序登陆接口 根据 appid secret 和 code 获取session_key 和 openid 微信小程序校验接口 获取前端数据rawData和signature rawData和session_key通过sha1加密后与signature进行合法性校验 微信...

    微信小程序后端接口:登陆,检验,数据解密

    微信小程序登陆接口

    • 根据 appid secret 和 code 获取session_key 和 openid

    微信小程序校验接口

    • 获取前端数据rawData和signature

    • rawData和session_key通过sha1加密后与signature进行合法性校验

    微信小程序数据解密

    • 获取前端数据encryptedData和iv

    • session_key为aeskey

    • 通过base64解码后,进行aes CBC模式PKCS7解密

    微信小程序登陆流程

    微信å°ç¨åºå¼åå®ç°ç»éæç¨

    1. 先调用wx.login()获取code,把code传到服务端,服务端根据code调用微信接口换取openid,可以把openid跟你的账户关联起来。如果数据库中没有这个openid那就算注册,返回小程序需要注册。如果有,那就返回小程序注册过,返回一个token之类的来作为登录状态。

    2. 小程序收到服务端返回的token缓存起来,下次进入小程序的时候就不用再调用wx.login(),而是直接调用业务接口就可以了。

    3. 服务器A拿到session_key后,生成一个随机数我们叫3rd_session,以3rdSessionId为key,以session_key + openid为value缓存到redis或memcached中;因为微信团队不建议直接将session_key在网络上传输,由开发者自行生成唯一键与session_key关联。其作用是: (1)将3rdSessionId返回给客户端,维护小程序登录态。

      (2)通过3rdSessionId找到用户session_key和openid。

    4. 客户端拿到3rdSessionId后缓存到storage。

    5. 通过wx.getUserIinfo可以获取到用户敏感数据encryptedData 。

    6. 客户端将encryptedData、3rdSessionId和偏移量一起发送到服务器A。

    7. 服务器A根据3rdSessionId从缓存中获取session_key。

    8. 在服务器A使用AES解密encryptedData,从而实现用户敏感数据解密。

     

    登陆后可获取的用户信息

    • openid 用户的唯一标识

    • nickname 用户昵称

    • sex 用户的性别,值为1时是男性,值为2时是女性,值为0时是未知

    • province 用户个人资料填写的省份

    • city 普通用户个人资料填写的城市

    • country 国家,如中国为CN

    • headimgurl 用户头像,最后一个数值代表正方形头像大小(有0、46、64、96、132数值可选,0代表640*640正方形头像),用户没有头像时该项为空。若用户更换头像,原有头像URL将失效。

    • privilege 用户特权信息,json 数组,如微信沃卡用户为(chinaunicom)

    • unionid 只有在用户将公众号绑定到微信开放平台帐号后,才会出现该字段。

    代码

    部分代码如下:

    package auth
    ​
    type Auth interface {
        SetOpenID2SessionKey(openID, sessionKey string) error
        GetSessionKeyByOpenID(openID string) (string, error)
        GetAllUser() (map[string]string, error)
    }
    ​
    var DefaultAuth = NewMemoryAuth()
    package auth
    
    type MemoryAuth struct {
    	openID2sessionKey map[string]string
    }
    
    func NewMemoryAuth() Auth {
    	return &MemoryAuth{
    		openID2sessionKey: map[string]string{},
    	}
    }
    
    func (ma *MemoryAuth) GetAllUser() (map[string]string, error) {
    	return ma.openID2sessionKey, nil
    }
    
    func (ma *MemoryAuth) SetOpenID2SessionKey(openID, sessionKey string) error {
    	ma.openID2sessionKey[openID] = sessionKey
    
    	return nil
    }
    func (ma *MemoryAuth) GetSessionKeyByOpenID(openID string) (string, error) {
    	return ma.openID2sessionKey[openID], nil
    }
    func Login(ctx *httpserver.Context, code string, conf *Config) (string, error) {
    	rsp := &Code2SessionKeyRsp{}
    
    	err := httputil.NewClient().
    		SetPostParam("code", code).
    		SetPostParam("client_id", conf.AppKey).
    		SetPostParam("sk", conf.SecrectKey).
    		SetHeader("Content-Type", "application/x-www-form-urlencoded").
    		SetPath(" ").
    		PostMethod().
    		Do().
    		RspJson(rsp, func(data interface{}) error {
    			if data.(*Code2SessionKeyRsp).ErrorNo != 0 {
    				return httputil.BadContent
    			}
    
    			return nil
    		}).
    		Error()
    	if err != nil {
    		ctx.Warning(err)
    		return "", err
    	}
    
    	e := authdata.DefaultAuth.SetOpenID2SessionKey(rsp.OpenID, rsp.SessionKey)
    	if e != nil {
    		ctx.Warning(e)
    		return "", e
    	}
    
    	return rsp.OpenID, nil
    }
    
    type Code2SessionKeyRsp struct {
    	OpenID     string `json:"openid"`
    	SessionKey string `json:"session_key"`
    
    	Error            string `json:"error"`
    	ErrorNo          int64  `json:"errno"`
    	ErrorDescription string `json:"error_description"`
    }

     

    展开全文
  • 微信小程序登陆.php

    2019-11-21 09:56:06
    微信小程序登陆,获取openid与session_key;并且根据前端返回的 解密数据对敏感信息进行解密 ,从而获取小程序unionId值,
  • 主要介绍了微信小程序 登陆流程详细介绍的相关资料,需要的朋友可以参考下
  • 微信小程序登陆的方法有很多种 咱们分开说 第一种 点击登陆按钮登陆 //=============wxml部分================ <button open-type="getUserInfo" bindgetuserinfo="getuser" >获取头像</button> //...

    微信小程序登陆的方法有很多种 咱们分开说

    第一种

    点击登陆按钮登陆

    //=============wxml部分================
    <button open-type="getUserInfo" bindgetuserinfo="getuser" >获取头像</button>
    
    //open-type 设置事件类型
    //bindgetuserinfo  设置时间名
    
    
    // ============js部分===============
    
    
    getuser(e){
      console.log(e.detail.userInfo)
    },
    
    // 注意 两个事件名 要对应
    
    //=============打印结果========
    avatarUrl: 
    
    "https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJzkDzxIjZItoorwV0AGDCCd7ib4PMJKzQicHae7CRxz8cUrh9n1xtTAnIibRBl4Me8lyRhhWDaxSAkQ/132"
    
    city: "Xinxiang"
    country: "China"
    gender: 1
    language: "zh_CN"
    nickName: "张没楞"
    province: "Henan"

    第二种

    纯JS 获取 一个方法 一步到位

      wx.getUserInfo({
         complete:(res)=>{
           console.log(res)
         }
       })

     

    以上两种方法 主要用于获取  头像和 昵称 无法获得 唯一Id  获得唯一Id 要用第三种

    第三种

    ****指你自己的服务器 OpenId是需要有自己的服务器才能拿到  在服务器中 将 code自己的id自己的密码 传给微信的服务器  微信的服务器会返回一个 openId 回来 可以将其储存到自己的服务器上用 或者返回给前端进行展示

    getOpenId(){
        wx.login({
          complete:(res)=>{
            console.log(res.code)
            // 获取临时的加密Id
              wx.request({
                url: 'https://www.*****.com?code='+res.code,
                    //****指你自己的服务器 OpenId是需要有自己的服务器才能拿到 
                success(res){
                  console.log(res)
                }
              })
          }
        })
     },

     

     

    展开全文
  • 引言相信大家在刚刚接触到微信小程序的开发时,首先是从前端的界面开始,而我们最熟悉的登录界面应该就是微信,那下面我将分享一下模拟微信的登陆界面的设计与功能的实现。方法介绍 目录结构首先在里面新建一个...

    引言

    相信大家在刚刚接触到微信小程序的开发时,首先是从前端的界面开始,而我们最熟悉的登录界面应该就是微信,那下面我将分享一下模拟微信的登陆界面的设计与功能的实现。

    246dd43409396bba676e29a6fa986f96.png

    方法介绍

    10c031d514d704956816ee0bd15b0360.png 目录结构89abb41cdbdfbd9f848e1fdf0712dbf0.png

    首先在里面新建一个images的文件夹用于放设计过程中需要用到的图片,然后在pages里面新建一个login的文件夹用于代码的编写。

    906d0bd37460b483ebb4bf6e14425543.png

    fcea2f59e819de22ea88534c154a5067.png10c031d514d704956816ee0bd15b0360.png关键代码/*app.json*/

    {

      "pages":[

        "pages/login/login",

        "pages/index/index",

        "pages/logs/logs"

      ],

      "window":{

        "backgroundTextStyle":"light",

        "navigationBarBackgroundColor": "#fff",

        "navigationBarTitleText": "WeChat",

        "navigationBarTextStyle":"black"

      },

      "style": "v2",

      "sitemapLocation": "sitemap.json"

    }

    246dd43409396bba676e29a6fa986f96.png/*pages/login/login.js*/

    const app = getApp()

    Page({

      data: {

        phone: '',

        password: '',

        success: false,

        text: ''

      },

      // 获取输入账号 

      phoneInput: function (e) {

        this.setData({

          phone: e.detail.value

        })

      },

      // 获取输入密码 

      passwordInput: function (e) {

        this.setData({

          password: e.detail.value

        })

      },

      // 登录 

      login: function () {

        var that = this;   

        var warn = null; //

        if (that.data.phone.length == 0) {

          wx.showToast({

            title: '用户名不能为空',

            icon: 'loading',

            duration: 1000

          })

        } else if (that.data.password.length == 0) {

          wx.showToast({

            title: '密码不能为空',

            icon: 'loading',

            duration: 1000

          })

        }

      },

      // 注册 

      register: function () {

        wx.navigateTo({

          url: '/pages/register/register',

        })

      }

    })

    246dd43409396bba676e29a6fa986f96.png/*pages/login/login.wxml*/

          账号 

          密码 

              loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="login">登录 

              loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="register">注册 

    246dd43409396bba676e29a6fa986f96.png/* pages/login/login.wxss */

    page{ 

      height: 100%; 

     } 

     .container { 

      height: 100%; 

      display: flex; 

      flex-direction: column; 

      padding: 0; 

      box-sizing: border-box; 

      background-color: #f2f2f2

     } 

     /*登录图片*/

     .login-icon{ 

      flex: none; 

     } 

     .login-img{ 

      width: 500rpx;

      height: 400rpx;

     } 

     /*表单内容*/

     .login-from { 

      margin-top: 20px; 

      flex: auto; 

      height:100%; 

     } 

     .inputView { 

      background-color: #fff; 

      line-height: 44px; 

     } 

     /*输入框*/

     .nameImage, .keyImage { 

      margin-left: 22px; 

      width: 14px; 

      height: 14px

     } 

     .loginLab { 

      margin: 15px 15px 15px 10px; 

      color: #545454; 

      font-size: 14px

     } 

     .inputText { 

      flex: block; 

      float: right; 

      text-align: left; 

      margin-right: 22px; 

      margin-top: 11px; 

      color: #cccccc; 

      font-size: 14px

     } 

     .line { 

      width: 100%; 

      height: 1px; 

      background-color: #cccccc; 

      margin-top: 1px; 

     } 

     /*按钮*/

     .loginBtnView { 

      width: 100%; 

      height: auto; 

      background-color: #f2f2f2; 

      margin-top: 0px; 

      margin-bottom: 0px; 

      padding-bottom: 0px; 

     } 

     .loginBtn { 

      width: 100%; 

      margin-top: 35px; 

     }

     .registerBtn { 

      width: 100%; 

      margin-top: 5px; 

     }

    10c031d514d704956816ee0bd15b0360.png 图片方面

    images里面需要放上三张图片,一个是账号前面的微信logo图片,第二个是密码前面的锁形状小图片,第三个就是微信人头小图片。

    dd95492e677d074c135c68de9f00b1ce.png       2c8f6a693d3ff46ab9c1a888b2aa67d5.png      0f37b9aa5375d41b5e7350b77936c8ea.png

    10c031d514d704956816ee0bd15b0360.png 效果图

    45c1192b7c5147216762b0f2fd9744d7.png

    246dd43409396bba676e29a6fa986f96.png

    结语

    关于小程序的分享界面到这里就结束了,喜欢的你可以继续关注我们哦!

    展开全文
  • 微信小程序的一个登陆注册代码,纯前端实现效果,注册成功进行登陆,列表显示所有用户的名称,点击进入可查看具体的用户信息
  • 微信小程序登陆组件封装

    千次阅读 2019-03-20 20:01:27
    微信小程序登陆组件封装 // components/login/login.js //获取应用实例 const app = getApp(); var $http = require('../../utils/http.js'); var util = require('../../utils/util.js'); Component({ /** * 组件的...

    微信小程序登陆组件封装

    // components/login/login.js
    //获取应用实例
    const app = getApp();
    var $http = require('../../utils/http.js');
    var util = require('../../utils/util.js');
    Component({
    /**
    * 组件的属性列表
    */
    properties: {
    
    },
    
    /**
    * 组件的初始数据
    */
    data: {
    
    },
    
    attached: function () { //检测有没有缓存到user_id
    	if (wx.getStorageSync("user_id")){
    		//已登录
    	}else{
    		this.check();
    	}
    },
    /**
    * 组件的方法列表
    */
    methods: {
    /***
    * 
    * 登录相关
    */
    //显示登录或授权提示
    showLoginModal: function () {
    	this.setData({
    	settingShow: true
    	});
    wx.hideTabBar();
    },
    //判断是否登录
    check: function (cb) {
    	console.log('登录')
    	var that = this;
    	wx.getSetting({
    	success: function (res) {
    		if (res.authSetting['scope.userInfo']) {
    
    			// 已经授权,可以直接调用 getUserInfo 获取头像昵称
    			console.log('已经授权');
    			wx.getUserInfo({
    			withCredentials: true,
    			success: function (res) {
    			that.setData({
    			settingShow: false
    		})
    		wx.showTabBar();
    
    		that.login();
    	},
    	fail: function () {
    	that.showLoginModal();
    
    }
    });
    	} else {
    	that.showLoginModal();
    
    }
    },
    fail: function () {
    that.showLoginModal();
    }
    });
    
    },
    login: function () {
    	var that = this;
    	var token = wx.getStorageSync('token') || '';
    	//调用登录接口
    	wx.login({
    	success: function (res) {
    	if (res.code) {
    	//发起网络请求
    	wx.getUserInfo({
    	success: function (ures) {
    	wx.request({
    	url: app.globalData.url + 'user/login',
    	data: {
    	code: res.code,
    	rawData: ures.rawData,
    	token: token
    	},
    	method: 'post',
    	header: {
    	"Content-Type": "application/x-www-form-urlencoded",
    },
    success: function (lres) {
    	var response = lres.data
    	if (response.code == 1) {
    	that.data.userInfo = response.data.userInfo;
    	// that.updateGlobalData(response.data);
    	wx.setStorageSync('token', response.data.userInfo.token)
    	// wx.setStorageSync('userInfo', response.data.userInfo);
    	wx.setStorageSync('user_id', response.data.userInfo.user_id);
    	// typeof cb == "function" && cb(response.data.userInfo);
    
    	//刷新当前页面
    	var pages = getCurrentPages();
    	var prevPage = pages[pages.length - 1]; //当前页面)
    	// prevPage.onLoad()
    	prevPage.onPullDownRefresh(); //重新刷新页面
    	} else {
    	wx.setStorageSync('token', '');
    	console.log("用户登录失败")
    	that.showLoginModal();
    }
    }
    });
    },
    fail: function (res) {
    that.showLoginModal();
    }
    });
    } else {
    that.showLoginModal();
    }
    }
    });
    },
    getuserinfo: function (e) {
    	if (!e.detail.userInfo) {
    
    	} else {
    	this.setData({
    	settingShow: false
    });
    	this.check();
    }
    
    },
    }
    })
    

    方法已经封装好,哪个页面需要授权登陆就可以把次组件引入到对应的页面就可以了。

    方法:
    1.在需要引入组件页面的.json文件中定义好模板名称和路径
    2.在.wxml页面中引入组件
    
    <login></login>
    
    展开全文
  • //微信小程序登陆核心代码 router.get('/mobile',function(req,resp){  //appid  //小程序后台代码  const appid = 'aaaa';  const appsecret = 'bbbbbbb';  var code =req.query.code;  console.log(code); ...
  • **PHP实现微信小程序登陆功能** 简单的写了一个小程序的登陆功能,做的可能不是太好,但是对于新手的话可以很好的理解,非常适合新手入门的一篇文章,废话不多说直接上代码 .wxml <form bindsubmit="login"> ...
  • 微信小程序登陆注册界面前后端完整代码展示

    千次阅读 多人点赞 2020-01-14 19:09:58
    微信小程序登陆注册界面前后端代码展示 一首先是前端页面效果图 二 登陆限制 登陆没设置太多限制,都输入正确就登陆成功,失败就显示下图 三 注册限制 注册主要现在三点 1 用户名不能重复,否则显示下图效果 2 ...
  • 微信小程序登陆模块invalid code问题

    千次阅读 2019-02-12 21:32:20
    微信小程序登陆模块invalid code问题 说明:笔者开发时使用的是测试appid,个人有申请过一个appid,所以后端使用申请的appid 问题:前端使用wx.login得到code,后端从微信服务器获取openid,但返回的结果是&quot...
  • 通常小程序有为我们提供用户授权登陆的功能,但是这个只能获取用户的头像和昵称,我们该怎么样来实现小程序账号密码的注册和登陆呢,今天就来手把手的带大家学习小程序登陆注册功能的开发。老规矩,先看效果图通过上...
  • 微信小程序登陆教程

    千次阅读 2018-05-30 09:56:40
    这就涉及到微信开放平台了,来看看有关小程序登陆原理的开发教程。很多网站支持QQ登录,微博登录,以及微信登录。 这种借账号体系的行为,我们早就讨论过,无需赘述。每个用微信的人,都一个微信号,在我们打开小...
  • 微信小程序登陆界面 login.wxml: <view class="container"> <view class="login-icon"> <image class="login-img" src="../images/loginLog.jpg"></image> </view> <view ...
  • 微信小程序登陆流程图

    千次阅读 2018-07-16 13:01:20
    前置条件一共有三端: - 微信小程序客户端 - 第三方服务器端- 微信服务器端1. 客户端获得code,并将code传给第三方服务端微信小程序端调用wx.login,获取登录凭证(code),并调用接口,将code发送到第三方客户端...
  • 通常小程序有为我们提供用户授权登陆的功能,但是这个只能获取用户的头像和昵称,我们该怎么样来实现小程序账号密码的注册和登陆呢,今天就来手把手的带大家学习小程序登陆注册功能的开发。 老规矩,先看效果图 ...
  • 微信小程序登陆

    2020-03-12 17:55:21
    后台服务器使用小程序的appid、appsecret和code,调用微信接口服务换取session_key和openid(openid可以理解为是每个用户在该小程序的唯一识别号) 后台服务器自定义生成一个3rd_session,用作openid和session_key的...
  • 感谢园友 @turingguo发布的https://www.cnblogs.com/turingguo/p/9019026.html 文章,详细介绍了ABP Zero集成微信小程序登陆的实现过程。 经测试,abp的外部登陆有几处bug,在此做记录。 1、xxxxWebHostModule.cs...
  • 微信小程序登陆及授权

    千次阅读 2018-08-28 17:09:31
    1,微信小程序开发中,首先会进行授权以及登陆,由于小程序的调整,现在在小程序里调用scope 为 "scope.userInfo" 时,无法弹出授权窗口,所以需要自己写授权。 2,授权,小程序授权方式改变后可以通过...
  • 微信小程序登录 小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识,快速建立小程序内的用户体系。 微信小程序登录流程时序图 说明 调用 wx.login() 获取 临时登录凭证code ,并回传到开发者...
  • 参考: 从密码到token, 一个授权的故事 理解OAuth 2.0 小程序官方文档 微信小程序之登录态维护(十一) 微信的登陆认证方式跟Oauth的授权码认证模式非常相似,接下来我大致讲解Oauth...
  • 微信小程序登陆流程

    2019-03-20 10:52:50
    #1:session_key和openId是什么?session_key 官方说明为: session_key是微信服务器生成...(2)对它“稍作处理”,用作维护小程序的登录态。 “稍微处理”大体为: (1)生成一个随机数(官方把他叫做3rd_sessio...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,451
精华内容 580
关键字:

微信小程序登陆

微信小程序 订阅