微信小程序——我的授权登录学习过程

# 学习



前言

学习使我快乐!

提示:以下是本篇文章正文内容,下面案例可供参考

一、api工厂

这是一个前端Paas中台,全面支持Web & 小程序 & App 开发!
通过中台开发你的应用,你将无需写接口,无需写后台,无需买服务器!
微信只是授权给我们,可以拿到用户账号的数据,登录注册需要提交到我们的服务器(公司服务器),使用api工厂模拟微信服务器登录和注册等接口,返还我们需要的openid,token等信息,
api工厂地址

首页
接口
{domain}换成自己专属域名
实际使用的路径为
“https://api.it120.cc/whz/user/wxapp/login”

二、封装网络请求路径

一看就会的封装流程

1.创建http文件夹,新建config.js,放置请求路径

export default {
    
    
  //取自前端api工厂我的专属服务器
  "registor":"/user/wxapp/register/complex",//注册
  "login":"/user/wxapp/login",//登陆
  "userDetail":"/user/detail"//用户详细信息
}

2.新建Request.js,封装函数

export const Request=function (url,method,data) {
    
    
  let p=new Promise((resolve,reject)=>{
    
    
    wx.request({
    
    
      url: url,
      method:method,
      //请求头依据情况设置
      header:{
    
    'Content-Type': 'application/x-www-form-urlencoded'},
      data:Object.assign({
    
    },data),
      success(res){
    
    
        resolve(res)
      },
      fail(err){
    
    
        reject(err)
      }
    })
  })
  return p;
}

3.新建index.js 作为入口文件

import {
    
    Request} from './request'
// console.log(Request);
const baseUrl='https://api.it120.cc/whz' //公共域名
import url from './config'

//注册
function registor(data){
    
    
  console.log(data);
  return Request(baseUrl+url.registor,"post",data)
}
//登录
function login(data){
    
    
  return Request(baseUrl+url.login,'post',data)
}
//用户详细信息
function userDetail(data){
    
    
  return Request(baseUrl+url.userDetail,'get',data)
}
export default {
    
    
  registor,login,userDetail
}

代码如下(示例):

import numpy as np
import pandas as pd
import matplotlib.pyplot as plt
import seaborn as sns
import warnings
warnings.filterwarnings('ignore')
import  ssl
ssl._create_default_https_context = ssl._create_unverified_context

4.挂载到全局对象,在页面中引入全局对象并调用

//app.js
import http from './http/index'
App({
    
    
  http,
  ……
  })
 //页面
 var app=getApp()
 app.http.方法().then(res=>{
    
    })

代码如下(示例):

data = pd.read_csv(
    'https://labfile.oss.aliyuncs.com/courses/1283/adult.data.csv')
print(data.head())

三、关于微信小程序的接口

前言

朋友推荐你个小程序,你刚一打开就弹窗请求获取你用户信息,你有些许反感;
你打开个小程序,发现首页特别有趣,功能很好玩,你想体验更多,然后点击登录,授权你的名字,开始大杀四方

wx.getUserInfo()

获取用户信息的接口,该方法必须得到用户授权才能使用,在初始化加载中无法使用,点击事件无法调用,必须授权后调用此接口才能返回用户信息。
授权会触发弹框,就那个是否允许获取数据那个弹框。
官方文档
接口调整
wx.getUserInfo()官方说明

别人写的简单易懂的说明

如何获取用户授权

<button open-type="getUserInfo" bindgetuserinfo="login">立即登录</button>

微信官方提供的方法,点击它会出现允许授权弹框,授权后执行回调函数,你可以通过e.detail.userInfo拿到用户数据;

login(e){
    
    
  // console.log(e.detail.userInfo);
  if(!e.detail.userInfo){
    
     //点击拒绝后弹框
    wx.showToast({
    
    
      title: '登陆失败',
      icon:"none"
    })
    return
  }
  //已经能拿到头像等信息了,但还要执行后续代码获取token和openid
      this.setData({
    
    
      avatar:e.detail.userInfo.avatarUrl,
      nickname:e.detail.userInfo.nickName,
      showlogin:true
    })   
  this.registor() //授权后执行函数回调,去注册登录啥的
},

wx.login()

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

这个接口是静默执行的,不会弹窗。
你可以在初始化的时候调用此方法,拿到code去完成简单注册.
详细注册需要获取用户数据(wx.getUserInfo()),跟code一起完成详细注册,这样注册的账号才会跟你的微信有关联。

wx.authorize()

提前向用户发起授权请求,获取某项授权.scope属性表示请求的权限,只能写一个;可执行三种回调函数

success 成功回调

fail 失败回调,拒绝请求后可以弹窗提示下

complete 成功失败都会执行的回调

此接口允许在onLoad生命周期中调用,也可以通过事件调用;调用后会弹窗。拒绝授权后不会再次弹窗,貌似需要重进或删除小程序才行,但你可以在右上角设置里面更改权限设置来实现

 wx.authorize({
    
    
  scope: 'scope.record',
  success(res){
    
    
   console.log(res)
  },
 })

完整流程

  1. wxml中写两个view,分别是未登录的样式,登录后的样式,使用hidden或wx:for设置隐藏显示
<view wx:if="{
    
    {showlogin}}" class="header-box">
    <image class="avatar" src="{
    
    {avatar}}"></image>
    <view class="r">
      <view class="uid">用户ID:</view>
      <view class="nick">{
    
    {
    
    nickname}}</view>

    </view>
  </view>
  <view wx:else class="header-box">
    <image class="avatar" src="/images/nologin2.png"></image>
    <button open-type="getUserInfo" bindgetuserinfo="login">立即登录</button>
  </view>
  1. js 授权后获取用户信息
login(e) {
    
    
    let that = this
    console.log(e);
    if (!e.detail.userInfo) {
    
     //点击拒绝授权的情况
      wx.showToast({
    
    
        title: '登陆失败',
        icon: "none"
      })
      return
    }
    let iv = e.detail.iv //加密算法的初始向量
    let encryptedData = e.detail.encryptedData    //加密的数据
    //存下头像和数据
    this.setData({
    
    
      avatar: e.detail.userInfo.avatarUrl,
      nickname: e.detail.userInfo.nickName,
      showlogin: true
    })
    that.registor(iv,encryptedData) //注册函数
  },
  1. 注册请求,实际开发中看情况判断用户是否是老用户
registor(iv,encryptedData){
    
    
    let that=this
    wx.login({
    
        //开始登录
      success(res) {
    
    
        let code = res.code   //获取动态凭据
        app.http.registor({
    
     code, iv, encryptedData }).then(res => {
    
        //先请求一次注册路径,判断有没有注册过
          console.log(res);
          if (res.data.code != 10000) {
    
     //没有注册过
            wx.showToast({
    
    
              title: '注册成功',
            })
          }
          that.getOpenId()  //登录函数
          //没注册过会注册成功,注册过会显示已经注册过,看需求如何定义用户是否注册过
         
        })
      },
    })
  },
  1. 登录请求
getOpenId() {
    
        //向后台发送code,获取token和uid
    wx.login({
    
    
      success(res) {
    
    
        // console.log(res);
        let code = res.code
        app.http.login({
    
     code }).then(res => {
    
    
          console.log(res); //返回的是openid,uid,token
          res = res.data;
          if (res.code != 0) {
    
    
            // 登录错误
            wx.showModal({
    
    
              title: '无法登录',
              content: res.msg,
              showCancel: false
            })
            return;
          }
          // 本地存储token和id
          wx.setStorageSync('token', res.data.token)
          wx.setStorageSync('uid', res.data.uid)
        })
      },
    })
  },

总结

太累了,日后待我学的更精通了在进行完善;有意见欢迎指教,诚惶诚恐,不胜感激

猜你喜欢

转载自blog.csdn.net/weixin_51198863/article/details/111616698
今日推荐