1. 程式人生 > 實用技巧 >taro3.x:簡單登入

taro3.x:簡單登入

獲取sessionKey及解密資料:

import api from '@services/api'
import app from '@services/request'
import storage from '@utils/storage'

export const fetchSessionKey = (code: string) => {
    return new Promise((resolve) => {
        app.request({
            url: app.apiUrl(api.getSessionKeyByCode),
            data: {
                code
            }
        }).then((result: any) 
=> { storage.setItem('session_key', result.session_key, 'login') resolve(result) }) }) } interface IDecryptParam { sessionKey: string encryptedData: string iv: string } export const fetchDecryptData = (decryptParam: IDecryptParam) => { return
new Promise((resolve) => { app.request({ method: 'POST', url: app.apiUrl(api.decryptData), data: decryptParam }, { loading: false }).then((result: any) => { resolve(result) }) }) }

登入介面:

import React from 'react'
import Taro from '@tarojs/taro'
import { View, Text, Button } from '@tarojs/components'

import storage from '@utils/storage'
import { fetchSessionKey, fetchDecryptData } from '@services/login'
import NavBar from '@components/navbar/index'
import './index.scss'

const Login = () => {
    const navData = {
        title: '',
        back: true,
        color: '#000000',
        backgroundColor: '#ffffff'
    }

    Taro.setNavigationBarColor({
        frontColor: navData.color,
        backgroundColor: navData.backgroundColor
    })

    const getUserInfo = (e) => {
        const errMsg = e.detail.errMsg
        if (errMsg === 'getUserInfo:ok') {
            Taro.login({
                success: function (res) {
                    if (res.code) {
                        fetchSessionKey(res.code).then((result: any) => {
                            fetchDecryptData({
                                sessionKey: result.session_key,
                                encryptedData: e.detail.encryptedData,
                                iv: e.detail.iv
                            }).then((result: any) => {
                                const user = {
                                    nickName: result.nickName,
                                    avatarUrl: result.avatarUrl,
                                }
                                storage.setItem('user', user, 'login')
                                Taro.navigateBack({
                                    delta: 1
                                })
                            })
                        })
                    }
                }
            })
        }

    }

    const handleLoginByPhone = () => {
        Taro.navigateTo({
            url: '/login/phone/index'
        })
    }

    return (
        
<View className="login"> <NavBar {...navData} /> <View className="login-header"> <Text className="title">線上</Text> <Text className="small">zx.com</Text> </View> <View className="login-content"> <View className="login-memo"> <View className="cut-line"></View> <Text className="desc">推薦使用登入方式</Text> </View> <Button className="btn btn-primary" openType="getUserInfo" onGetUserInfo={getUserInfo}> <Text>微信登入</Text> </Button> <View className="btn btn-plain" onClick={handleLoginByPhone}> <Text>手機快捷登入</Text> </View> </View> </View> ) } export default Login

撥打電話功能:

const handlePhoneCall = () => {
        Taro.makePhoneCall({
            phoneNumber: '1340000' //僅為示例,並非真實的電話號碼
          })
    }