Question
阻止用户使用不以 @mycompany.com 结尾的电子邮件地址通过 Firebase/Google 身份验证登录我们的内部应用程序的最佳方法是什么？
Goal
- 防止用户使用错误的电子邮件登录应用程序
- 获取用户的公司电子邮件地址并将其用于其他地方的身份验证（即从内部网站提取数据）
限制
- 我使用的是react-native init，因为我必须使用我们公司的原生SDK模块来实现
- 最好需要 Firebase 的解决方案，因为我们已经将其与用于 FCM/推送通知的本机 SDK 模块一起使用。
研究成果
- 我看到react-native-google-signin有一个“hostedDomain”选项，但它似乎没有做任何事情。我不确定如何使用它，并且没有文档或良好的使用示例。有一个功能请求here但这就是我能找到的全部。
- 我看到有一个类似的存储库，react-native-google-sign-in，但它没有提供有关此主题的更多信息。
- 我在某处读到，我可能认为这一切都是错误的，身份验证不能限制电子邮件地址（？），但我可以限制谁可以使用所述电子邮件地址访问信息。这对我没有帮助，因为我们现在没有使用 Firebase 的数据库来做任何事情。我需要一种方法来引导用户使用公司电子邮件登录。
-
此人似乎有类似的问题并找到了护照的解决方案，但我不知道如何将其应用于我的用例。
Setup
- IntelliJ 旗舰版 2017.2.2
- React Native 0.47.1（使用react-native init，而不是CRNA或expo，因为我需要与本机SDK模块集成）
- Firebase 中的 google-services.json 存在于 android/app 文件夹中
安卓设置
package.json 依赖项
"dependencies": {
"create-react-class": "^15.6.0", /* Ignore this */
"firebase": "^4.2.0",
"react": "16.0.0-alpha.12",
"react-native": "0.47.1",
"react-native-app-intro": "^1.1.5",
"react-native-google-signin": "^0.11.0",
"react-native-linear-gradient": "^2.2.0",
"react-navigation": "^1.0.0-beta.12"
}
android/settings.gradle
rootProject.name = '[My Project Name]'
include ':react-native-google-signin'
project(':react-native-google-signin').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-google-signin/android')
include ':react-native-linear-gradient'
project(':react-native-linear-gradient').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-linear-gradient/android')
include ':app', ':[Internal Android SDK]'
android/build.gradle
buildscript {
repositories {
jcenter()
}
dependencies {
classpath 'com.android.tools.build:gradle:2.3.3'
classpath 'com.google.gms:google-services:3.0.0'
}
}
allprojects {
repositories {
mavenLocal()
jcenter()
maven {
// All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
url "$rootDir/../node_modules/react-native/android"
}
}
}
ext {
compileSdkVersion = 26
buildToolsVersion = "26.0.1"
}
subprojects { subproject ->
afterEvaluate{
if((subproject.plugins.hasPlugin('android') || subproject.plugins.hasPlugin('android-library'))) {
android {
compileSdkVersion rootProject.ext.compileSdkVersion
buildToolsVersion rootProject.ext.buildToolsVersion
}
}
}
}
android/app/build.gradle
apply plugin: "com.android.application"
[...]
dependencies {
compile(project(":react-native-google-signin")){
exclude group: "com.google.android.gms" // very important
}
compile project(':react-native-linear-gradient')
compile project(':[Internal Android SDK]')
compile fileTree(include: ['*.jar'], dir: 'libs')
compile 'com.android.support:appcompat-v7:26.0.0-alpha1'
compile 'com.facebook.react:react-native:+'
compile 'com.facebook.fresco:animated-gif:1.0.1'
compile 'com.google.android.gms:play-services-auth:10.0.1'
compile 'com.google.firebase:firebase-messaging:10.0.1'
}
[...]
apply plugin: 'com.google.gms.google-services'
反应本机设置
当前文件夹结构：
> app
> components [...]
> config [...]
> screens
HomeScreen.js
LoginScreen.js
[...]
> styles [...]
router.js (just a simple StackNavigator setup from react-navigation)
> assets
> fonts [...]
> img [...]
> node_modules [...]
index.android.js
index.ios.js
package.json
[...]
LoginScreen.js（这是一项正在进行的工作）
import React, { Component } from 'react';
import { Alert, Button, Image, Text, View } from 'react-native';
import {GoogleSignin, GoogleSigninButton} from 'react-native-google-signin';
export default class LoginScreen extends Component{
constructor(props){
super(props);
this.state = {
user: null
}
}
componentDidMount() {
this._setupGoogleSignin().then(() => console.log('Mounted & Google setup complete.'));
}
async _setupGoogleSignin() {
try {
await GoogleSignin.hasPlayServices({ autoResolve: true });
await GoogleSignin.configure({
hostedDomain: 'mycompany.com' //doesn't do anything
});
const user = await GoogleSignin.currentUserAsync();
console.log('User: ',user);
this.setState({user});
}
catch(err) {
console.log("Play services error", err.code, err.message);
}
}
_signIn() {
GoogleSignin.signIn()
.then((user) => {
console.log('User: ',user);
this.setState({user: user});
})
.catch((err) => {
console.log('WRONG SIGNIN', err);
})
.done();
}
_signOut() {
GoogleSignin.revokeAccess().then(() => GoogleSignin.signOut()).then(() => {
this.setState({user: null});
})
.done();
}
render(){
if (!this.state.user){
return (
<View style={{flex: 1}}>
<View style={{flex: 1.5, alignItems: 'center', justifyContent: 'center', marginTop: 40}}>
<Image
style={{width: 156, height: 156, resizeMode: 'contain'}}
source={require('../../assets/img/google_logo1600.png')} />
<Text style={{fontSize: 32, fontWeight: 'bold'}}>
Google Identity
</Text>
<Text style={[{fontSize: 15, paddingTop: 5}]}>
To continue, please sign-in.
</Text>
</View>
<View style={{flex: 1, alignItems: 'center', justifyContent: 'center', marginBottom: 40}}>
<GoogleSigninButton
style={{width: 312, height: 48}}
size={GoogleSigninButton.Size.Wide}
color={GoogleSigninButton.Color.Light}
onPress={() => this._signIn()}/>
</View>
</View>
);
} else {
return (
<View style={{flex: 1}}>
<View style={{flex: 1.5, alignItems: 'center', justifyContent: 'center', marginTop: 40}}>
<Image
style={{width: 156, height: 156, resizeMode: 'contain'}}
source={require('../../assets/img/google_logo1600.png')} />
<Text style={{fontSize: 32, fontWeight: 'bold'}}>
Google Identity
</Text>
<Text style={[{fontSize: 15, paddingTop: 5}]}>
To continue, please sign-in.
</Text>
</View>
<View style={{flex: 1, alignItems: 'center', justifyContent: 'center', marginBottom: 40}}>
<Button style={{width: 312, height: 48, backgroundColor: '#4385F2', color: 'white'}} title="Log Out" onPress={() => this._signOut()} />
</View>
</View>
)
}
}
}
如果有更好的方法来做到这一点，我洗耳恭听。谢谢！
