在尝试按照此设置进行反应原生与Auth0 https://auth0.com/docs/quickstart/native/react-native/00-login之后,我被引用了另一个涉及Expo的设置,因为React Native现在使用了expo。该设置的链接位于https://github.com/expo/auth0-example。在尝试将此示例与我的项目合并后,我不断收到“无效令牌”警告和“可能未处理的承诺拒绝”警告。
以下是我从样本中仔细改编的代码:
import Expo, { AuthSession } from 'expo';
import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import Auth0 from 'react-native-auth0';
import jwtDecoder from 'jwt-decode';
const auth0ClientId = 'OX7ZOyOM9dPrOZlxCz28qsbg3jYFPYRL';
const auth0Domain = 'https://tinder-score.auth0.com';
/**
* Converts an object to a query string.
*/
function toQueryString(params) {
return '?' + Object.entries(params)
.map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
.join('&');
}
export default class App extends React.Component {
state = {
username: undefined,
};
_loginWithAuth0 = async () => {
const redirectUrl = AuthSession.getRedirectUrl();
const result = await AuthSession.startAsync({
authUrl: `${auth0Domain}/authorize` + toQueryString({
client_id: auth0ClientId,
response_type: 'token',
scope: 'openid name',
redirect_uri: redirectUrl,
})
});
console.log(result);
if (result.type === 'success') {
this.handleParams(result.params);
}
}
handleParams = (responseObj) => {
if (responseObj.error) {
Alert.alert('Error', responseObj.error_description
|| 'something went wrong while logging in');
return;
}
console.log(responseObj);
const encodedToken = responseObj.id_token;
const decodedToken = jwtDecoder(encodedToken);
const username = decodedToken.name;
this.setState({ username });
}
render() {
return (
<View style={styles.container}>
{this.state.username !== undefined ?
<Text style={styles.title}>Hi {this.state.username}!</Text> :
<View>
<Text style={styles.title}>Example: Auth0 login</Text>
<Button title="Login with Auth0" onPress={this._loginWithAuth0} />
</View>
}
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
title: {
fontSize: 20,
textAlign: 'center',
marginTop: 40,
},
});
Expo.registerRootComponent(App);