Expo Electron OAuth2 登录

Question

我正在尝试使用 Expo 为多个不同的平台构建一个应用程序，包括桌面 - 使用 Electron。现在我在继续记录过程直到结束时遇到问题。

我知道 Electron 使用 Expo React Native Web 功能，但我不知道如何在重定向后继续记录过程。

这是我试过的：


const useProxy = Platform.OS !== 'web';

export function AuthScreen() {
const {nextState} = useAuth();

    const discovery = AuthSession.useAutoDiscovery('https://my-open-id.url');

    const redirectUri = AuthSession.makeRedirectUri({
        useProxy,
    });

    // Create and load an auth request
    const [request, , promptAsync] = AuthSession.useAuthRequest(
        {
            clientId: 'client-id',
            clientSecret: 'client-secret',
            redirectUri,
            scopes: ['openid', 'profile', 'email', 'offline_access'],
        },
        discovery
    );

    const login = useCallback(async () => {
        const result = await promptAsync({useProxy});
        console.log({result});

        if (!result) {
            return;
        }

        switch (result.type) {
            case "cancel":
            case "dismiss":
                return;
            case "error":
                return;
            case "locked":
                return;
            case "success":
                const token = result.authentication;
                nextState(token);
                return;
        }
    }, [promptAsync]);

    if (Platform.OS !== 'web') {
        useEffect(() => {
            WebBrowser.warmUpAsync();
            return () => {
                WebBrowser.coolDownAsync();
            }
        }, []);
    }

    return (
        <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
            <Text>Auth Screen</Text>
            <Button title="Login!" disabled={!request} onPress={login}/>
        </View>
    );
}

每当我点击 Login 按钮时，我都会被重定向到我的 OAuth2 服务器并且我可以登录。之后，我应该被重定向到我的应用程序，但没有。

登录过程后，新的 window 仍然存在，应用程序的另一个实例继续存在。

我也在寻找 Electron 功能，以了解如何充分破解它，从而拥有一个完整的工作流程，但我仍然不知道如何从代码的 React Native 部分访问 Electron 的主进程。

如有任何帮助，我们将不胜感激。

Answer 1

Expo 正在使用 Private URI Scheme 来监听登录响应，因此请首先确保您已根据文档正确注册。

正在接收深层链接

一旦您知道您的应用程序的方案，测试它的一种简单方法是通过这样的命令，具体取决于运行 on Mac 还是 Windows:

open x-mycompany-desktopapp:/somepath
start x-mycompany-desktopapp:/somepath

我会按照 RFC8252 中的建议确保在系统浏览器中进行登录。避免在 React Native windows.

上登录

在浏览器中，您应该会看到 return 应用程序登录响应的提示。我的 blog post 中有一些屏幕截图，用于普通的 Electron OAuth 安全应用程序。

电子多实例逻辑

我的Electron OAuth desktop code sample uses a Private URI Scheme and deals with the multi instance issue you mention - see this code和requestSingleInstanceLock的使用.

希望这些注释能为您提供一些线索和可能的操作。当我开发这个时，一个重要的里程碑是能够从我的 main.ts 源文件中捕获日志语句！

OAuth 在 UI 中实施起来很棘手，有时 Expo 等更高级别的技术给您带来的可见度非常低。

Expo Electron OAuth2 登录

Expo Electron OAuth2 Login

react-native

oauth-2.0

electron

expo

expo-web