Expo Electron OAuth2 登录

Posted 2023-02-19

【中文标题】Expo Electron OAuth2 登录

【英文标题】：Expo Electron OAuth2 Login

【发布时间】：2021-10-26 12:09:31

【问题描述】：

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

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

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

任何帮助将不胜感激。

【参考方案1】：

Expo 使用Private URI Scheme 来监听登录响应，所以首先确保您已按照文档正确注册。

接收深层链接

一旦您知道了您的应用的方案，一个简单的测试方法就是通过这样的命令，具体取决于是在 Mac 还是 Windows 上运行：

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

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

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

电子多实例逻辑

我的 Electron OAuth desktop code sample 使用私有 URI 方案并处理您提到的多实例问题 - 请参阅 this code 和 requestSingleInstanceLock 的使用。

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

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