Expo Electron OAuth2 登录

     2023-02-19     125

关键词:

【中文标题】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 之类的更高级别的技术可以让您获得很少的可见性。

【讨论】:

Expo 与 Google 登录的集成

】Expo与Google登录的集成【英文标题】:ExpointegrationwithGoogleSignIn【发布时间】:2022-01-0517:02:18【问题描述】:我正在尝试将通过Google帐户登录到我的应用程序。我遇到了一个问题。Expo提供了两种解决方案。Google(https://docs.expo.dev/v... 查看详情

对于某些版本的 Android,FB 登录的 Expo AuthSession 不会重定向到 expo App

】对于某些版本的Android,FB登录的ExpoAuthSession不会重定向到expoApp【英文标题】:ExpoAuthSessionforFBloginnotredirectingtoexpoAppforsomeversionsofAndroid【发布时间】:2018-05-1814:35:17【问题描述】:我遇到了来自Expo和Facebook登录的authSession问题。... 查看详情

为啥我的函数不会打开 React Native (Expo) 的 Facebook 登录页面?

】为啥我的函数不会打开ReactNative(Expo)的Facebook登录页面?【英文标题】:Whywon\'tmyfunctionopenuptheFacebookLoginpageforReactNative(Expo)?为什么我的函数不会打开ReactNative(Expo)的Facebook登录页面?【发布时间】:2021-07-1504:35:33【问题描述】:... 查看详情

如何修复 Google expo auth session 登录错误“尝试完成登录时出现问题”

】如何修复Googleexpoauthsession登录错误“尝试完成登录时出现问题”【英文标题】:HowtofixGoogleexpoauthsessionsigninError"Somethingwentwrongwhentryingtofinishsigningin"【发布时间】:2022-01-1402:27:51【问题描述】:我正在尝试使用expo-auth-sess... 查看详情

Apple 登录(使用 Firebase 和 Expo)在本地工作,但不能独立运行

】Apple登录(使用Firebase和Expo)在本地工作,但不能独立运行【英文标题】:AppleSignIn(withFirebase&Expo)workinglocallybutnotonstandalone【发布时间】:2020-05-1120:03:45【问题描述】:我在我的Expo应用程序上实现了signinWithApple按钮,当我在... 查看详情

未找到访问令牌受众中的 OAuth2 客户端 ID

】未找到访问令牌受众中的OAuth2客户端ID【英文标题】:OAuth2clientidinaccesstokenaudienceisnotfound【发布时间】:2021-02-1809:31:31【问题描述】:首先,我很抱歉我的英语不好。我使用Expo创建了一个Android应用程序。我通过Firebase实现了Goo... 查看详情

Expo-ios / facebook登录不起作用独立应用程序

】Expo-ios/facebook登录不起作用独立应用程序【英文标题】:Expo-ios/facebooklogindoesn\'tworkstandaloneapp【发布时间】:2019-01-0619:27:52【问题描述】:我最近完成了使用reactnative和expo创建的应用程序的编程。我使用expo模拟器在ios和android上... 查看详情

登录 Firebase React Native Expo 后无法获取用户数据

】登录FirebaseReactNativeExpo后无法获取用户数据【英文标题】:Can\'tgetuserdataafterlogginginFirebaseReactNativeExpo【发布时间】:2021-09-2202:23:12【问题描述】:我正在尝试使用ReactNative/Expo和Firebase创建一个社交媒体应用程序,并且我已经成... 查看详情

Expo Google 登录 DEVELOPER_ERROR

】ExpoGoogle登录DEVELOPER_ERROR【英文标题】:ExpoGoogle-Sign-InDEVELOPER_ERROR【发布时间】:2019-12-2115:38:07【问题描述】:我开发了一个ReactNative应用程序,并使用ExpoGoogle-Sign-In进行Firebase身份验证。当我尝试在Android上的独立APK上进行身份... 查看详情

EXPO Google 登录和 Android 应用问题

】EXPOGoogle登录和Android应用问题【英文标题】:EXPOGoogleSignInAndAndroidappIssue【发布时间】:2021-01-2416:48:53【问题描述】:我正在构建一个反应原生应用程序。当我将应用程序导出到APK文件时,谷歌登录不起作用。发生的情况是:我... 查看详情

如何在使用 redux 登录 facebook/expo 和 firebase 后显示用户数据

】如何在使用redux登录facebook/expo和firebase后显示用户数据【英文标题】:HowtoshowtheUserDataafterlogginginwithfacebook/expoandfirebaseusingredux【发布时间】:2017-12-1202:41:25【问题描述】:目标:1.我想将我的用户的public_profile数据保存到firebase... 查看详情

Expo Google登录在IOS的试飞中不起作用

】ExpoGoogle登录在IOS的试飞中不起作用【英文标题】:ExpoGoogleloginnotworkinTestflightinIOS【发布时间】:2021-06-1711:13:47【问题描述】:我在expogooglesing-ininapp中遇到了如此严重的问题。在开发模式下它工作正常,但是当我在试飞中上传... 查看详情

React-Native Expo,Facebook 登录无法在 Android 设备上运行

】React-NativeExpo,Facebook登录无法在Android设备上运行【英文标题】:React-NativeExpo,FacebookloginnotworkingonAndroiddevice【发布时间】:2021-02-1908:05:54【问题描述】:SDK版本:39平台(Android/iOS/web/all):android这里是小吃:https://snack.expo.io/@t... 查看详情

facebook登录错误,react-native ios expo

】facebook登录错误,react-nativeiosexpo【英文标题】:Errorwithfacebooklogin,react-nativeiosexpo【发布时间】:2018-12-2818:15:04【问题描述】:我的移动应用有问题问题在于facebook登录,但仅限于IOS它已经在android中工作(甚至在生产中)相反,... 查看详情

错误:verifier._reset 不是函数。尝试使用 Firebase 使用手机登录时,反应原生和 Expo

】错误:verifier._reset不是函数。尝试使用Firebase使用手机登录时,反应原生和Expo【英文标题】:Error:verifier._resetisnotafunction.whentryingtoSigninwithphoneusingfirebase,reactnativeandExpo【发布时间】:2021-12-1803:33:48【问题描述】:我正在尝试在m... 查看详情

springcloud云架构-sso单点登录之oauth2.0登录流程

上一篇是站在巨人的肩膀上去研究OAuth2.0,也是为了快速帮助大家认识OAuth2.0,闲话少说,我根据框架中OAuth2.0的使用总结,画了一个简单的流程图(根据用户名+密码实现OAuth2.0的登录认证):  上面的图很清楚的描述了当... 查看详情

expo React-native 数据未呈现但登录控制台

】expoReact-native数据未呈现但登录控制台【英文标题】:expoReact-nativedatanotrenderingbutlogsinconsole【发布时间】:2021-05-1918:48:27【问题描述】:我正在从API获取数据,它工作正常,使用react-native和expo我正在使用redux,它正在使用单个... 查看详情

使用 Spring Webflux 自定义 OAUTH2 登录的登录页面

】使用SpringWebflux自定义OAUTH2登录的登录页面【英文标题】:CustomizingloginpageforOAUTH2loginwithSpringWebflux【发布时间】:2021-12-0102:06:40【问题描述】:我正在寻找自定义我的oauth2登录页面。我正在使用SpringCloudGateway,所以这是SpringSecur... 查看详情