LOGIN 小程序登录

Reference

I. wx.login文档

II. code2Session 接口文档

III. 一文打通微信小程序登录与授权的任督二脉-理论篇(附代码) 必看！

IV. 头像昵称填写

解答

什么是Open ID ?

微信小程序openid是指用户在使用微信小程序时，微信系统为该用户生成的唯一标识符。 每个用户的openid都是唯一的，并且与该用户的微信账号相关联。 开发者可以通过调用微信小程序开发接口，获取用户的openid，并且使用openid来实现用户身份的识别和管理。

如何获得 App ID, App Secret 和 临时登录凭证 code ?

App ID 和 App Secret 可以在微信公众平台，[开发] 》 [开发管理] 》[开发设置] 》[开发者ID]

临时登录凭证 code 可以通过调用 wx.login() 来获取，wx.login() 使用办法可参考 如何获得 Open ID.

如何获得 Open ID ?

当用户访问小程序时，首先在 app.js 中调用 wx.login() 来获取用户的临时登录凭证 code，并将其发送到开发者的服务器接口code2Session{https://api.weixin.qq.com/sns/jscode2session}进行核实和检验，检验成功后会返回session_key 和 openID 等等 回小程序。

格式为：

https://api.weixin.qq.com/sns/jscode2session?appid={$appid}&secret={$secret}&js_code={$code}&grant_type=authorization_code

举例：

https://api.weixin.qq.com/sns/jscode2session?appid=wxf26991ae11f547d0&secret=657rbd9a61bacd11e75181ca94a88aed&js_code=0d2fm80w3w1QC13OG01w3WpKqH3fm80X&grant_type=authorization_code

实际应用：

// to send the code to server and return the open_id to frontend
    wx.login({
      success: res => {
        // Send res.code to backend to return openId
        let code = res.code
    
        console.log("code: " + code);
        
        wx.request({
          url: 'https://api.weixin.qq.com/sns/jscode2session?appid=wxf26991ae11f547d0
          &secret=657bd9a61bacd11e775180ca949a8aed&js_code=0d2fm80w3w1QC13OG01w3WpKqH3fm80X
          &grant_type=authorization_code',
          
          method: 'POST',
          
          data: {
            code: code
          },
          
          success: (res) => {
            console.log(res)
          },
          fail: (err) => {
            console.log(err)
          },
        })
      }
    })

返回:

{session_key: "FtWHc5J5iGskfJvBDe+IUw==", openid: "oLxmG61mb5SCBhfQMd_5y_xGqz18"}

实现微信小程序登录的理论

1. 在 app.js 中，使用 wx.login() 获取用户的登录凭证 code，并将该 code 通过 wx.request() 发送到verify_user.php. 返回的数据可以通过wx.setStorageSync() 将数据存储在本地缓存中。

    // to send the code to server and return the open_id to frontend
    wx.login({
      success: res => {
        // Send res.code to backend to return openId
        let code = res.code
        // console.log("code: " + code);
        wx.request({
          url: 'https://kosontechnology.com/wechat/verify_user.php',
          method: 'POST',
          data: {
            code: code
          },
          success: (res) => {
            var result = res.data;
            // console.log(result);
            if (result.status == "Not Existing") {
              // if server return not exsit, meaning user never login
              // save the open id to storage and use later
              wx.setStorageSync('open_id', result.open_id);
              //other action
            } else if (result.status == "Existing") {
              // if server return  exsit, meaning user login before
              // save the open id and user info to storage and use later
              wx.setStorageSync('open_id', result.open_id);
              wx.setStorageSync('user_info', JSON.stringify(result[0]));
              //other action
            }
          },
          fail: (err) => {
            console.log(err)
          },
        })
      }
    })
  },

1. 在 verify_user.php 中，PHP 脚本接收来自小程序的 code，并使用该 code 向微信 API 的 jscode2session 端点发送请求，以获取用户的 OpenID。然后，开发者可以检查mySQL数据库中是否存在该 OpenID 用户。如果存在，返回用户数据为 "Existing"；否则返回 "Not Existing" 到小程序。

<?php
//STEP 1: FIND OPENID ----------------------------------------------------------------------

// 接收前端发送的 code
$inputJSON = file_get_contents('php://input');
$input = json_decode($inputJSON, TRUE);
$code = $input['code'];


// 获取用户的 OpenID
$openid = getOpenID($code);


function getOpenID($code) {
    $appid = 'wx3fef8b7b2c588651';
    $secret = 'cad048d52b95efc9d0c805a0763cab79';
    // TESTING ACCOUNT
    // $appid = 'wx89929da304159a1a';
    // $secret = '0e7655b3673503212486e0c5dafa6a51';
    $url = "https://api.weixin.qq.com/sns/jscode2session?appid={$appid}&secret={$secret}&js_code={$code}&grant_type=authorization_code";
    
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    
    $response = curl_exec($ch);
    curl_close($ch);
    
    $data = json_decode($response, true);
    
    // 解析响应数据，获取 OpenID
    if (isset($data['openid'])) {
        $openid = $data['openid'];
        return $openid;
    } else {
        return "nothing";
    }
}

//STEP 2: VERIFY IF LOGIN B4 FROM DATABASE --------------------------------------------------

// 与数据库的连接
require_once "db_wechat.php";
mysqli_set_charset($conn, 'utf8');

// 检查连接是否成功
if ($conn->connect_error) {
    die("Database Connected Failed: " . $conn->connect_error);
}

// 执行SQL 语句
// 检查OPEN_ID是否存在于database
$sql = "SELECT * FROM wechat_travel_user where open_id = '$openid'";
$result = mysqli_query($conn, $sql);


$response = array();

// 如果有
if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
        $response[] = $row;
        $response['status'] = 'Existing';
    }


// 如果没有
} else {
    $response['open_id'] = $openid;
    $response['status'] = 'Not Existing';
 
}

// 发送回前端
echo json_encode($response);
?>

1. 如果返回的数据为 Not Existing"， 那么便导向用户到注册页面。小程序提供了头像昵称填写, 如图下：

<input type="nickname" class="weui-input" placeholder="请输入昵称"/>

<button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
  <image class="avatar" src="{{avatarUrl}}"></image>
</button> 

1. 开发者可将收集到的头像和昵称储存到数据库以实现注册和登录的功能。以下是实体例子：

login/index.wxml

收集用户头像和昵称的表格

  <form bindsubmit="submit">
        <view class="get_user">
            <button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
                <image open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar" class="avatar" src="{{avatarUrl}}"></image>
            </button>
            <input name="nickName" type="nickname" placeholder="请输入昵称" />
        </view>
        <button class="submit"  plain="true" form-type="submit">立即登录</button>
    </form>

login/index.js

将昵称和Open ID 发送到 login_user.php。

Page({
  data: {
    nickName: "微信用户",
    avatarUrl: "https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132"
  },

  onChooseAvatar(e) {
    const {
      avatarUrl
    } = e.detail
    this.setData({
      avatarUrl,
      selectedAvatar: true,
    });
    console.log(avatarUrl);
  },
  

  submit(e) {
        const formData = e.detail.value;
        if(this.data.selectedAvatar && formData.nickName){
            wx.showLoading({
                title: '加载中',
              })
              let user = e.detail.value;
              var nickName = user.nickName;

              this.setData({
                nickName: nickName,
              });
              wx.uploadFile({
                url: 'https://kosontechnology.com/wechat/login_user.php',
                filePath: this.data.avatarUrl,
                name: 'file',
                formData: {
                  nickName: this.data.nickName,
                  openId: wx.getStorageSync('open_id')
                },
                header: {
                  'content-type': 'application/json' // 默认值
                },
                success: (res) => {
                  wx.hideLoading();
                  wx.switchTab({
                    url: '/pages/index/index'
                  });
                }
              })
        }
        else{
                wx.showModal({
                  title: '用户资讯不完整',
                  content: '请保证你的信息输入正确且完整',
                  showCancel: false,
                  confirmText: '确定',
                  success(res) {
                    if (res.confirm) {
                      console.log('OK button');
                    }
                  }
                });
        }
  },
})

后台服务器的 login_user.php

将用户名和Open ID保存到数据库中，并将头像保存到服务器的avatar 文件夹里。

<?php
ini_set('display_errors', 1);
error_reporting(E_ALL);
// 接收前端发送的 code
$username = $_REQUEST['nickName'];
$open_id = $_REQUEST['openId'];
$avatar_name = $open_id . ".jpg";
$avatar_url = "https://kosontechnology.com/wechat/avatar/" . $avatar_name;

if ($username === "" || $avatar_name === "") {
  echo "Error:Nickname or Avatar no found";
} else {

  // 与数据库的连接

  require_once "db_wechat.php";
  mysqli_set_charset($conn, 'utf8');

  // 检查连接是否成功
  if ($conn->connect_error) {
    die("Database Connected Failed: " . $conn->connect_error);
  }


  // 执行SQL 语句
// Insert data to databasec
  $sql = "INSERT INTO user (open_Id, username, avatar) VALUES ('$open_id', '$username' , '$avatar_url')";
  if ($result = mysqli_query($conn, $sql)) {
    if ($_FILES["file"]["error"] > 0) {
      echo "Error: " . $_FILES["file"]["error"] . "<br />";
    } else {
     // 头像 保存到 avatar folder path
      $target_directory = "avatar/";
      $target_file = $target_directory . $avatar_name;
      if (move_uploaded_file($_FILES["file"]["tmp_name"], $target_file)) {
        echo "Stored in: " . $target_file;
      } else {
        echo "Error moving uploaded file.";
      }
    }
  }


}