如何在React Native中限制google登录我公司的电子邮件域名(@ company.com)？

Question

题

防止用户使用不以@ mycompany.com结尾的电子邮件地址通过Firebase/Google身份验证登录我们的内部应用程序的最佳方法是什么？

目标

• 阻止用户使用错误的电子邮件登录该应用
• 获取用户的公司电子邮件地址并将其用于其他地方的身份验证(即从内部网站提取数据)

约束

• 我使用的是react-native init,因为我必须使用我们公司的原生SDK模块实现
• 最好使用Firebase的解决方案,因为我们已经将其与所述原生SDK模块一起用于FCM /推送通知.

研究结果

• 我看到react-native-google-signin有一个"hostedDomain"选项,但它似乎没有做任何事情.我不确定如何使用它,并且没有使用它的文档或好例子.有它功能请求这里,但是这就是我能找到.
• 我看到有一个类似的repo,react-native-google-sign-in,但它不提供有关此主题的更多信息.
• 我在某处读到我可能认为这一切都错了,身份验证不能限制电子邮件地址(？),但我可以限制谁可以使用所述电子邮件地址访问信息.这对我没有帮助,因为我们现在没有使用Firebase的数据库.我需要一种方法来指导用户使用他们的公司电子邮件登录.
• 这个人似乎有类似的问题,并找到了护照的解决方案,但我不知道如何将此应用于我的用例.

建立

• IntelliJ Ultimate 2017.2.2
• React Native 0.47.1(使用react-native init,而不是CRNA或expo,因为我需要与本机SDK模块集成)
• 来自Firebase的google-services.json存在于android/app文件夹中

Android安装程序

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"
}

安卓/ 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]'

安卓/的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设备/应用/的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'

React Native设置

当前文件夹结构:

> 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>
            )
        }

    }
}

如果有更好的方法来做到这一点,我会全力以赴.谢谢!

Answer 1

无法限制谁可以使用默认的 Firebase 身份验证 Google 提供商进行身份验证。但用户通过登录所做的只是验证自己的身份：“我是 Frank van Puffelen，这是证据”。

您可以限制用户有权访问的资源。例如，对于Firebase 数据库，您可以使用其服务器端安全规则来确定每个用户有权访问的内容。您可以在此处限制来自特定域的用户的访问。

另请参阅：

• 将 Firebase Google OAuth 身份验证限制为特定用户
• 如何在 Firebase 3.x 中禁用注册