Taro小程序如何授权, 以及获取手机号

// 授权
import React, { useEffect } from 'react';
import Taro from '@tarojs/taro';

const AuthPage = () => {
  useEffect(() => {
    // Taro.getSetting：获取用户的当前设置。返回值中只会出现小程序已经向用户请求过的权限。
    Taro.getSetting({
      success: (res) => {
        if (res.authSetting['scope.userInfo']) {
          // 用户已经授权过，可以直接获取用户信息
          getUserInfo();
        } else {
          // 用户未授权，需要弹出授权窗口
          showAuthModal();
        }
      }
    });
  }, []);

  const showAuthModal = () => {
    Taro.showModal({
      title: '授权提示',
      content: '需要获取您的用户信息',
      confirmText: '去授权',
      cancelText: '取消',
      success: (res) => {
        if (res.confirm) {
          // 用户点击确认，打开授权设置页面
          openSetting();
        }
      }
    });
  };

  const openSetting = () => {
    // Taro.openSetting：调起客户端小程序设置界面，返回用户设置的操作结果。设置界面只会出现小程序已经向用户请求过的权限。
    Taro.openSetting({
      success: (res) => {
        if (res.authSetting['scope.userInfo']) {
          // 用户授权成功，可以获取用户信息
          getUserInfo();
        } else {
          // 用户拒绝授权，提示授权失败
          Taro.showToast({
            title: '授权失败',
            icon: 'none'
          });
        }
      }
    });
  };

  const getUserInfo = () => {
    Taro.getUserInfo({
      success: (res) => {
        const { encryptedData, iv } = res;
        // 在这里将 encryptedData 和 iv 传给后端解密获取用户信息
      }
    });
  };

  return (
    <div>授权页面</div>
  );
};

export default AuthPage;
```

在上述代码中，`useEffect` 钩子函数会在页面加载时执行，调用 `Taro.getSetting()` 判断用户是否已授权。如果用户已经授权过，可以直接调用 `getUserInfo()` 获取用户信息；如果用户未授权，则弹出授权提示窗口，并在用户点击确认后打开授权设置页面。在授权设置页面中，用户可以选择是否授权。授权设置页面关闭后，通过 `Taro.openSetting()` 获取用户的授权结果，如果用户授权成功，则调用 `getUserInfo()` 获取用户信息；如果用户拒绝授权，则提示授权失败。在 `getUserInfo()` 中可以获取到用户信息的 `encryptedData` 和 `iv`，可以将它们传递给后端进行解密获取用户信息的操作。

// 获取手机号

1. 在小程序的配置文件 `app.config.ts` 中配置 `requiredUserInfo`，将 `phoneNumber` 加入到 `requiredUserInfo` 中，示例代码如下：
```typescript
export default {
  requiredUserInfo: ['phoneNumber'],
  // 其他配置项...
}

import React from 'react';
import Taro from '@tarojs/taro';

class PhoneNumberAuth extends React.Component {
  handleGetPhoneNumber = () => {
    Taro.login({
      success: (res) => {
        if (res.code) {
          Taro.getUserInfo({
            success: (userInfoRes) => {
              const { encryptedData, iv } = userInfoRes;
              // 在这里将 encryptedData 和 iv 传给后端解密获取手机号
            }
          });
        }
      }
    });
  }

  render() {
    return (
      <button onClick={this.handleGetPhoneNumber}>获取手机号</button>
    );
  }
}

在上述代码中，点击按钮时会触发 `handleGetPhoneNumber` 函数，该函数先调用 `Taro.login()` 获取登录凭证 code，然后调用 `Taro.getUserInfo()` 获取用户信息和手机号。在 `Taro.getUserInfo()` 的 success 回调函数中，获取到 `encryptedData` 和 `iv`，可以将它们传递给后端进行解密获取手机号的操作。