15、微信小程序登录详解

1、登录流程

1、获取临时登陆凭证 code (code —— 限频接口),wx.login()

2、前端向服务器发送 ajax 请求( wx.request() ),该请求需要携带三个参数:code、appid、appsecret,目的是获取唯一标识符 token,在api 文件夹下新建 login.js

3、前后端交互

        3.1  对于一个新用户,程序内部没有可提供的 appsecret,用户需先注册才能获得appsecret

        3.2  用户登录,此时程序内部将只需传入 code appid两个参数,同时服务器发送内部请求,将根据用户传入的 appid 来找相应的appsecret

        3.3  用户根据 code appid appsecret 实现登录

4、前端将用户唯一标识符 token 保存在本地,此后所有个人相关的业务都需要用到 token,若没有token,则需要跳转到 登陆页面获取

  

 api——request.js


import baseUrl from './baseUrl'
function request(config) {
    return new Promise((resolve, reject) => {
        wx.request({
            url: baseUrl + config.url,
            timeout: 5000,
            method: config.method,

            //   在微信小程序中,get、post、delete、put 传参都是 data
            data: config.data, //如果需要传参
            success(res) {
                resolve(res)
            },
            fail(error) {
                console.log('error=>', error);
                reject(error)
            }
        })
    })

}

export default request

api——login.js

//  写接口
import request from './request'

function doLogin(data) {
    return request({
        url: '',  //登录接口
        method: 'get',
        data
    })
}

export const register=(data)=>{
    return request({
        url:'',     //注册接口
        method:"get",
        data
    })
}
export {
    doLogin
}

api——baseUrl.js

export default 'http://www……'  //导出域名

wxLogin——index.wxml

<button type="primary" bindtap="login">登录</button>
<button type="default" class="register" bindtap="register">注册</button>

wxLogin——index.js

import { doLogin, register as registerApi } from '../../api/login'

Page({
    data: {},
    /*    登录流程:
       1、获取临时登陆凭证(code码 ) —— 限频接口
       2、 发送 ajax 请求,该请求需要携带 APPID APPsecret code,目的是获取用户唯一标识符
            在 api 文件夹下新建 login.js
       3、前后端交互
       3.1 对于一个新用户,程序内部没有提供现成可用的 APPsecret ,用户需要先注册(appid、appsecret)才能拿到 APPsecret
       3.2 用户登录,此时程序内部将只需传入 code appid两个参数,同时服务器发送内部请求,将根据用户传入的 appid 来找相应的appsecret
       3.3  然后根据 code appid appsecret 实现用户登录效果
       4、将用户唯一标识符 token 保存在本地
       此后所有与个人相关的业务都需要携带 token,若没有token,则需要跳转到登录页面,使之携带token
       5、前端通过 wx.request() 发起业务请求
    */

    // 登录
    login() {
        wx.login({
            success: res => {
                console.log(res);
                let code = res.code
                // 获取用户唯一标识符
                doLogin({
                    // 接口对应的文档中要求传递的参数 code、appid,但实际需要参数有三个 
                    code, //临时登陆凭证
                    appid: ''//在小程序后台的“开发管理——开发设置——APPID(小程序ID)”拿
                }).then(res2 => {
                    console.log(res2);
                    // 将用户唯一标识符 token 保存在本地
                    wx.setStorageSync('token', res2.data.id)
                })
            }
        })
    },

    // 注册
    register() {
        registerApi({
            appId: '',//在小程序后台的“开发管理——开发设置——APPID(小程序ID)”拿
            appSecret: '',  //小程序密钥
        }).then(res3 => {
            console.log(res3);
        })
    },


})

 

 

  • 1
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值