支付宝授权登录

支付宝官方参考链接

https://opendocs.alipay.com/mini/api/openapi-authorize?pathHash=22642781

官方流程相关图片

服务器地址要改成自己公司的服务器地址

 

示例

 

1、基本结构

<template>
  <view class="header">
    <image src="../../../static/login/bg_login.png" mode="aspectFill" class="pictureOne"></image>
    <!-- <text class="loginTitle">登录</text> -->
  </view>
  <!-- 头像 -->
  <view class="avatar">
    <button open-type="chooseAvatar" class="avatarButton" @chooseavatar="getavatar">
      <image class="picture" mode="scaleToFill" :src="zfbUserStore.userInfo.avatar ? zfbUserStore.userInfo.avatar : '../../../static/login/logo.png'"></image>
    </button>
  </view>

  <!-- 昵称 -->
  <view class="nick_name">
    <text class="infoName">用户昵称: {{ zfbUserStore.userInfo.nickName ? zfbUserStore.userInfo.nickName : '未知用户' }}</text>
  </view>

  <!-- 授权按钮 -->
  <button
    class="game"
    v-if="!zfbUserStore.userInfo.avatar || !zfbUserStore.userInfo.nickName"
    scope="userInfo"
    open-type="getAuthorize"
    @GetAuthorize="getOpenUserInfo"
    @error="getInfoError"
  >
    支付宝授权登录
  </button>
</template>

 2、在storen里面创建一个zfb.js文件

import {
  defineStore
} from 'pinia'
import {
  ref
} from 'vue'

export const useLoginStore = defineStore('login',
  () => {

    // 当前地址
    const user = ref({
      nick_name: ''
    })

    const phoneNumber = ref('');

    const userInfo = ref({
      avatar_url: ''
    });

    const getAuthorCode = () => {

      return new Promise((resolve, inject) => {
        my.getAuthCode({
          // scopes: 'auth_user',
          scopes: ['auth_base'],
          success: ({
            authCode
          }) => {
            // console.log('authCode: ', authCode);
            my.request({
              // 你的服务器地址
              url: 'https://cs.jiarenmai.com/addons/yun_shop/api.php?route=plugin.lease-toy.api.ali_yun.index&i=1',
              data: {
                authCode
              },
              success: (res) => {
                // 获取需要的用户信息
                console.log(res);
                user.value = res.data;

                // 获取需要的用户信息
                // this.userInfo = JSON.parse(res.response).response;
                // console.log(this.userInfo.avatar);

                uni.setStorage({
                  key: 'user_info',
                  data: JSON.stringify(res.data)
                });

                resolve(res)
              }
            });
          }
        });

      })

    }

    const getOpenUserInfo = () => {

      return new Promise((resolve, inject) => {
        my.getOpenUserInfo({
          success: (res) => {
            console.log('res---getOpenUserInfo--->>>', res);

            userInfo.value = JSON.parse(res.response).response;
            userInfo.value.avatar_url = res.avatar;

            uni.setStorage({
              key: 'avatar_url',
              data: userInfo.value.avatar
            });
            uni.showToast({
              title: '授权个人信息成功'
            });
            resolve(res)
          },

          fail: (res) => {
            uni.showToast({
              title: '授权个人信息失败'
            });
            inject(res)
          }
        });
      })

    }

    const getPhoneNumber = () => {

      return new Promise((resolve, inject) => {
        my.getPhoneNumber({
          success: (res) => {
            // 修改
            let encryptedData = res.response;
            let timestamp = new Date().getTime();
            // console.log(timestamp);
            // console.log(encryptedData);
            my.request({
              //你的服务器地址
              method: 'post',
              url: 'https://cs.jiarenmai.com/addons/yun_shop/api.php?route=plugin.lease-toy.api.ali_yun.get-phone&i=1',
              data: {
                encryptedData: encryptedData,
                appid: 1,
                timestamp: timestamp,
                scope: 'freelogin',
                open_id: '2088132524985913'
              },
              success: (res) => {
                console.log(res);
                phoneNumber.value = res.data.data;

                uni.setStorage({
                  key: 'phone_number',
                  data: res.data.data
                });
                uni.showToast({
                  title: '手机号授权成功'
                });
                resolve(res)
              }
            });
          },
          fail: (res) => {
            console.log(res);
            inject(res)
          }
        });

      })

    };

    const logout = () => {
      console.log('--logout-----');

      uni.showModal({
        content: '确定要退出吗?',
        success: (result) => {
          console.log('-success---', result);

          if (result.confirm) {
            console.log('zfb--确定退出', 1111);
            userInfo.value.nickName = '';
            userInfo.value.avatar = '';
            phoneNumber.value = '';
            uni.clearStorage();
            uni.showToast({
              title: '退出成功',
              icon: 'success'
            })
          } else if (result.cancel) {
            console.log('zfb--取消退出', 222);
            uni.showToast({
              title: '取消退出',
              icon: 'none'
            })
          }
        }
      });
    };

    return {
      user,
      phoneNumber,
      userInfo,
      getAuthorCode,
      getOpenUserInfo,
      getPhoneNumber,
      logout

    }

  }, {
    persist: {

    }
  }
)

3、在授权的页面导入store的zfb文件

 

<script setup>
// 支付宝的登录
const zfbUserStore = useLoginStore();
// 支付宝---授权登录
const getOpenUserInfo = () => {
  console.log('getOpenUserInfo', 111111);
  zfbUserStore.getAuthorCode();

  zfbUserStore.getOpenUserInfo();
};

const getPhoneNumber = () => {
  zfbUserStore.getPhoneNumber();
};

const getPhoneError = () => {
  uni.showToast({
    title: '取消手机号码授权'
  });
};
</script>