微信小程序 登录的简单实现

微信小程序 实现登录

最近一段时间,微信小程序在张小龙的8小时演讲下瞬间火了起来,但是呢没火多久,就迅速沉静下去了,我也是不知道张小龙什么想法,但是我想法挺多的,好了,废话说多了,聊一下正题吧,我呢是刚入行的小程序员,一路上采坑不断,别人遇不到的坑基本上踩了一遍,话说我的运气有时候也确实挺爆炸的,小程序一个小登录送给大家,

一、小程序开发前准备

目前在网上的教程已经不计其数了,给大家推荐一个网址: http://www.jb51.net/article/111566.htm 这里面介绍比较详细,

二、小程序登录

我先开始的时候在登录就出问题了,因为当时官方给的文档就让人很纠结,因为官方给的文档让人感觉就凌乱了,在这里我解释一下,

官方给的流程:

第一步:获取用户授权信息(每次的授权信息都不一样)

第二部: 上代码

wx.request({
 url : API_URL,//自己的服务接口地址
 method : 'POST',
 // 在这里需要格外注意了,所有的post请求header必须是下面的格式不然你又入坑了
 header : {'content-type':'application/x-www-form-urlencoded'},
 data :
 {
 iv: res2.iv,
 code: code,
 encryptedData: res2.encryptedData
 },
 success: function (data)
 {
 // 4.解密成功后 获取自己服务器返回的结果
 // 解密的sdk在开发文档上搜索-签名加密-然后你阅读后就知道了-下载属于自己语言的解码包
 if(data.data.status == 1)
 {
 var userInfo_ = data.data.userInfo;
 }else
 {
 console.log('解密失败')
 }
 },
 fail:function()
 {
 console.log('系统错误')
 }
}) 

他的意思是所有的操作在后台进行,这样相对安全一点,还有一点就是公众号需要的unionId可以通过解密获取到,那样的话就可以在公众号的页面看到你的小程序了,unionId是公众号和小程序的共用ID,如果你们的项目是需要关联的话那我还是建议你按照官方的走,如果不是的话,下面的方式可以迅速解决你的登录问题

自定义流程:

//app.js
function Login(code,username,img)
{
 var that = this
 wx.request({
 url:HTTP_URL,
 data:
 {
  appid : '你后台获取的appdi',
  secret : '你后台获取的secret',
  js_code : code,
  grant_type : 'authorization_code'
 },
 method:'GET',
 header:{'content-type': 'application/json'},
 success: function (a)
 {
  var openid = a.data.openid
  // 请求自己的服务器
  wx.request({
  url:API_URL,
  data:
  {
   img : img
   openid : openid,
   username : username,
  },
  success: function(b)
  {
   // 成功返回用户的唯一ID(这是数据库ID)
   console.log(b.data.uid)
   // 我这里是把用户返回的ID存到了缓存里因为,我在使用全局变
   // 量时候发现有时候引入了js但是还会有丢失找不到的现象
   wx.setStorageSync('uid', b.data.uid)
  }
  })
 },
 fail: function ()
 {
  // 在这里你要考虑到用户登录失败的情况
  wx.showToast({
  title: '网站正在维护中...',
  icon: 'loading',
  duration: 10000
  });
 }
 })
}
// 自己服务器的地址
// 注意:开发时可以是http协议,但是如果上线必须申请https协议(也就是SSL协议)协议可以在阿里和腾讯的控制
// 台都可以购买,例子:阿里-管理控制台-安全(云盾)-证书服务,一般用dv免费的就可以了协议申请完后需要补全,
// 补全完毕后下载文件是个压缩包,里面有两个文件,把他们放到你服务器上,然后再配置文件中指明这是ssl协议并
// 且指明路径,这样 你就算配置成功了,至于如何配置,网上开源的教程挺多的,nginx有Apache也有如果你
var API_URL = "自己服务器的地址";
// 微信提供的接口地址:这里必须要把https://api.weixin.qq.com这个网址在微信后台安全域名中添加进去否则你会
// 感觉生活是如此的黑暗完全看不到希望
var HTTP_URL = "https://api.weixin.qq.com/sns/jscode2session?appid=appid&secret=app_sectet&grant_type=authorization_code&js_code=code";
App({
 onLaunch: function ()
 {
 // 调用API从本地缓存中获取数据
 var logs = wx.getStorageSync('logs') || []
 logs.unshift(Date.now())
 wx.setStorageSync('logs', logs)
 },
 getUserInfo: function (cb)
 {
 var that = this
 if(this.globalData.userInfo)
 {
  typeof cb == "function" && cb(this.globalData.userInfo)
 }else
 {
  // 调用登录接口
  wx.login({
  // login流程
  success: function (res)
  {
   //登录成功
   if (res.code)
   {
   // 这里是用户的授权信息每次都不一样
   var code = res.code;
   wx.getUserInfo({
    // getUserInfo流程
    success: function (res2)
    {
    // console.log(res2)
    that.globalData.userInfo = res2.userInfo
    typeof cb == "function" && cb(that.globalData.userInfo)
    var username = res2.userInfo.nickName
    var img = res2.userInfo.avatarUrl
    // 请求自己的服务器
    Login(code,username,img);
    }
   })
   }else
   {
   wx.showModal({
    title: '提示',
    content: '获取用户登录态失败!'+res.errMsg
   })
   }
  }
  })
 }
 },
 globalData:
 {
 userInfo:null
 }
}) 

下面附两张图片是申请SSL协议的大概流程图微信小程序 登录的简单实现
微信小程序 登录的简单实现

有些乱,大家将就一下。

还有就是注意一点,那就是代码的重用,毕竟小程序代码上传是有限制的不得大于1MB,有些代码其实可以节省的有些css代码或是js代码有些都是可以封装一下的开发工具提供了app.js和app.css有些你感觉每个页面都会用到的都可以放到里面,这样也就减少了一些麻烦,还有就是有些人查看手机时,发现只能查看静态的,这里提醒一定要打开调试模式,不然你就干着急吧。以上就是个人的一些经验分享,感谢观看。如果说对各位有帮助的话,希望点个赞。第一次写博客,感谢支持。

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

时间: 2017-04-17

微信小程序实战之登录页面制作(5)

提供一个登录页的案例,供同学们使用 项目效果图: 目录结构: 图片资源: name.png key.png loginLog.jpg login.wxml: <view class="container"> <view class="login-icon"> <image class="login-img" src="../images/loginLog.jpg"></image>

微信小程序 MD5加密登录密码详解及实例代码

微信小程序 MD5加密 在小程序中,页面的脚本逻辑是在JsCore中运行,JsCore是一个没有窗口对象的环境,所以不能在脚本中使用window,也无法在脚本中操作组件.zepto/jquery 也无法使用,因为zepto/jquery 会使用到window对象和document对象.所以在微信小程序中不能使用jquery.md5.js对密码进行加密.下面我提供一种MD5.js加密实例,本实例先静态演示,后面再到小程序中演示. md5.js程序如下: /* * A JavaScript impl

微信小程序 本地存储及登录页面处理实例详解

实例内容 登陆界面 处理登陆表单数据 处理登陆表单数据(异步) 清除本地数据 登录界面: 在app.json中添加登陆页面pages/login/login,并设置为入口. 保存后,自动生成相关文件(挺方便的). 修改视图文件login.wxml <!--pages/login/login.wxml--> <view class="container"> <form bindsubmit="formSubmit"> <vie

微信小程序登录态控制深入分析

微信小程序登录态控制深入分析 最近微信小程序终于开放了个人注册,我当然不能浪费这个炫技的好机会,"菲麦日程"小程序正在全力推进中,尽请期待~~ 在登录态控制中,摸索尝试了小一阵子,特此分享 一.微信建议的登录态控制 说明: 1)小程序内通过wx.login接口获得code 2)将code传入后台,后台对微信服务器发起一个https请求换取openid.session_key 3)后台生成一个自身的3rd_session(以此为key值保持openid和session_key),返回给前

微信小程序开发一键登录 获取session_key和openid实例

微信小程序开发一键登录 获取session_key和openid实例 思来想去不愿自己的微信小程序是个单机版本.自己又不会写后台.现在借助leancloud可以实现微信小程序一键登录功能.尝试后,做笔记. 第一步:下载av-weapp.js,放到utils下. 第二步:使用 const AV = require('../../utils/av-weapp.js');路径根据具体情况而定. 第三步:做初始化. AV.init({ appId: 'EJx0NSfY********-gzGzoHsz'

微信小程序搭建及解决登录失败问题

等了好久的小程序,终于在近日曝光了.现在就带大家来尝尝鲜.以下是一张随便看看的图. 一.构建微信小程序的步骤 下载开发工具 考虑到微信0.9.092100的Web开发者工具对于登录做了限制,所以下载登录还是需要一点门路的,我在下面有介绍,希望大家耐心的往下面看~下载工具的地址:链接 密码: r3hc. 破解的步骤就是:将破解压缩包的两个文件,放到如下图路径: 这个是MAC路径: 应用程序->微信web开发者工具->显示包内容 /Resources/app.nw/app/dist/compone

微信小程序中做用户登录与登录态维护的实现详解

总结 大家都知道,在开发中提供用户登录以及维护用户的登录状态,是一个拥有用户系统的软件应用普遍需要做的事情.像微信这样的一个社交平台,如果做一个小程序应用,我们可能很少会去做一个完全脱离和舍弃连接用户信息的纯工具软件. 让用户登录,标识用户和获取用户信息,以用户为核心提供服务,是大部分小程序都会做的事情.我们今天就来了解下在小程序中,如何做用户登录,以及如何去维护这个登录后的会话(Session)状态.下面来看看详细的介绍: 在微信小程序中,我们大致会涉及到以下三类登录方式: 自有的账号注册和登

微信小程序 后台登录(非微信账号)实例详解

微信小程序 后台登录 实现效果图: 最近写了一个工具类的小程序,按需求要求不要微信提供的微信账号登录,需要调取后台登录接口来登录.由于小程序大部分都是调取微信信息登录,很少有调用自己后台来登录的,所以写的时候各种坑,现在把趟好坑的代码共享给大家吧!(PS:如有不妥之处,共勉之.) 废话不说,直接上代码 找到app.js在里面写如下代码 App({ onLaunch: function () { //调用API从本地缓存中获取数据 var logs = wx.getStorageSync('log

微信小程序 登录实例详解

微信小程序登录 一. 小程序不支持cookie会话 1. 通过传递与检验3rd_session来保持会话 2. 3rd_session可以执行'`head -n 80 /dev/urandom | tr -dc A-Za-z0-9 | head -c 168`该命令生成 3. 使用Redis或者数据库存储session 4. 生成的3rd_session发送给客户端,写入storage 5. 客户端的每次请求必须带上3rd_session 二.加密数据解码 1. $iv,$code是被加密过的数

微信小程序开发(一) 微信登录流程详解

最近在研究微信小程序开发,非常有意思的一个东西.花了一点时间写了一个微信的登录流程,包括后端接口和小程序代码. 做过微信登录的都知道,我们需要一个标识来记录用户的身份的唯一性,在微信中unionId就是我们所需要的记录唯一ID,那么如何拿到unionId就成了关键,我将项目分为小程序和 后台PHP代码两部分来讲. 微信小程序开放平台 先从我们的小程序代码开始 简单的说一下我们小程序的js代码登录流程 login ->获取code ->getUserInfo获取iv和encryptedData

微信小程序开发图片拖拽实例详解

微信小程序开发图片拖拽实例详解 1.编写页面结构:moveimg.wxml <view class="container"> <view class="cnt"> <image class="image-style" src="../uploads/foods.jpg" style="left:{{ballleft}}px;width:{{screenWidth}}px" bi

微信小程序后台解密用户数据实例详解

 微信小程序后台解密用户数据实例详解 微信小程序API文档:https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-login.html openId : 用户在当前小程序的唯一标识 因为最近根据API调用https://api.weixin.qq.com/sns/jscode2session所以需要配置以下服务,但是官方是不赞成这种做法的, 而且最近把在服务器配置的方法给关闭了.也就是说要获取用户openid,地区等信息只能在后台获取. 一下是官方的

微信小程序 获取二维码实例详解

 微信小程序 获取二维码实例详解 理论: 接口A: 适用于需要的码数量较少的业务场景 接口地址:(永久有效,数量有限,进入path对应的页面) https://api.weixin.qq.com/wxa/getwxacode?access_token=ACCESS_TOKEN path String 不能为空,最大长度 128 字节 width Int 430(默认) 二维码的宽度 auto_color .. line_color .. 接口B:适用于需要的码数量极多,或仅临时使用的业务场景(永

微信小程序的日期选择器的实例详解

微信小程序的日期选择器的实例详解 前言: 关于微信小程序中的日期选择器大家用过都会发现有个很大的问题,就是在2月的时候会有31天,没有进行对闰年的判断等各种情况.看了官方文档提供的源码后进行了一些修改,测试修复了上面所说的bug! 下面源码: <!---js---> const date = new Date();//获取系统日期 const years = [] const months = [] const days = [] const bigMonth = [1,3,5,7,8,10,

微信小程序 上传头像的实例详解

微信小程序 上传头像的实例详解 最近在做微信小程序上传头像和上传照片功能就随手写一下代码: 上传头像html: <view class="edit-list"> <text class="list-name list-first">头像</text> <view class="edit-righr-bar"> <image class="head-portrait" src

微信小程序 sha1 实现密码加密实例详解

微信小程序 sha1 实现密码加密实例详解 在utils中的util.js 文件中增加 函数 实现 字符串转换为16进制加密后的字符串 function encodeUTF8(s) { var i, r = [], c, x; for (i = 0; i < s.length; i++) if ((c = s.charCodeAt(i)) < 0x80) r.push(c); else if (c < 0x800) r.push(0xC0 + (c >> 6 & 0x

微信小程序之GET请求的实例详解

微信小程序之GET请求的实例详解 学习前端的人应该都会使用ajax的get请求数据,那么在微信小程序里怎样实现get请求呢?下面我就给大家演示一下简单的get请求. 先上代码: //index.js //获取应用实例 var app = getApp() Page({ data: { motto: 'Hello World', onLoad: function () { var that = this wx.request({ url: 'http://apis.baidu.com/heweat

微信小程序之数据缓存的实例详解

微信小程序之数据缓存的实例详解 前言: 在H5之前,缓存一般都是用cookie,但是cookie的存储空间太小.于是,H5增加了新的缓存机制,即localstorage 和 sessionstorage,具体的介绍就不在多说.在微信小程序中,数据缓存其实就和localstorage 的原理差不多,所以理解起来并不难.下面我们来一起实现一下. 效果图展示: 我们在index页面存入数字11,然后在跳转到新页面,在将缓存中的11取出渲染到当前页面.具体代码如下: index页面: <span sty

微信小程序 wx:for的使用实例详解

微信小程序 wx:for的使用实例详解 在小程序的开发过程中,经常会用到在前端页面循环打印一个数组或者对象的数据,这样的话就需要用wx:for来实现. 一般情况下,小程序的utils这个文件夹下,我们可以把本地的数据写进去,封装成.js文件,提供对外暴露的接口,然后读取本地数据,这些在上一篇博客中有详细介绍.我们最后说到写好的本地数据可以另一个页面读取: var fileData = require('../../utils/data.js') Page({ data: { showData:

微信小程序富文本渲染引擎的详解

微信小程序富文本渲染引擎的详解 步骤 把 wxParser 目录放到小程序项目的根目录下 在需要富文本解析的 WXML 内引入 wxParser/index.wxml 在页面 JS 文件内使用 wxParser.parse(options) 方法解析 HTML 内容 在小程序项目根目录的 app.wxss 内引入 wxParser 的默认样式库 wxParser.parse(options) 方法的 options 参数说明 参数名 类型 必填 描述 bind String 是 要绑定的数据名称