taro3.x:簡單登入
阿新 • • 發佈:2020-10-09
獲取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) => { returnnew 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' //僅為示例,並非真實的電話號碼 }) }