0

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

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

这是我尝试过的：


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 服务器并且我可以登录。之后，我应该被重定向到我的应用程序，但没有。

在此处输入图像描述

在登录过程之后，新窗口仍然存在，并且该应用程序的另一个实例继续存在。

在此处输入图像描述

我也在寻找电子功能，以了解如何充分破解它，以便拥有完整的工作流程，但我仍然不知道如何从代码的本机反应部分访问电子的主要过程。

任何帮助，将不胜感激。

4

1 回答 1

1

Expo 使用私有 URI 方案来监听登录响应，因此首先确保您已根据文档正确注册它。

接收深层链接

一旦你知道你的应用程序的方案，一个简单的测试它的方法是通过这样的命令，取决于是在 Mac 还是 Windows 上运行：

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

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

在浏览器中，您应该会看到将登录响应返回给应用程序的提示。在我的这篇博客文章中有一些屏幕截图，用于简单的 Electron OAuth 安全应用程序。

电子多实例逻辑

我的Electron OAuth 桌面代码示例使用私有 URI 方案并处理您提到的多实例问题 - 请参阅此代码和requestSingleInstanceLock.

希望这些笔记能给你一些线索和可能的行动。当我开发这个时，一个重要的里程碑是能够从我的main.ts源文件中捕获日志语句！

OAuth 在 UI 中实现起来很棘手，有时诸如 Expo 之类的更高级别的技术可能会给您带来很少的可见性。

于 2021-08-26T13:40:37.790 回答