【electron】This browser or app may not be secure“ error when trying to sign in with Google on desktop

report error

"Browser or app may not be secure. Try using a different browser." error with Flutter Firebase Google Login
or
This browser or app may not be secure“ error when trying to sign in with Google on desktop

background

The micro-app micro-front sub-application built on electron implements the google auth2 function. Our architecture is electron+micro-app (desktop project) and react spa (sub-application project).
Due to the spa limitation of google auth2, we cannot directly call the auth2 authentication interface in the sub-application, because it is blocked by google security. So we created a new form on the electron desktop, and then created a webview in this form to create a browser environment and provide it to the spa authentication page for execution. This requires registration of the application and configuration on the unified consent screen.

Problem Description

On the spa consent login page running in the webview, when redirecting the login interface where Google obtains the authorization code code, the login is restricted.

problem analysis

After consulting relevant information, Google will restrict security before May 2020, and registered spa applications will be restricted from logging in. The hint is that the browser is not safe, because our electron is in the node environment, and it does have the ability to modify the underlying layer.

参考自[1]:https://support.google.com/accounts/answer/6010255
参考自[2]:https://stackoverflow.com/questions/59480956/browser-or-app-may-not-be-secure-try-using-a-different-browser-error-with-fl

Solution

By modifying the useAgent attribute of webview, inject it into the user agent environment of webview, and modify the kernel. As shown in the following code:

<webview
                    src={webviewUrl}
                    style={
   
   { flex: 1 }}
                    // useragent={userAgent}
                    useragent={'Chrome'}
                    preload={preloadJs}
                    webpreferences="enableRemoteModule=true,nodeIntegration=true,nativeWindowOpen=yes,contextIsolation=false"
                />

After success, the interface will change, as shown in the figure below:
insert image description here
or
insert image description here

参考自[1]:https://support.google.com/accounts/thread/22873505?msgid=24503570
参考自[2]:https://support.google.com/accounts/thread/22873505/this-browser-or-app-may-not-be-secure-error-when-trying-to-sign-in-with-google-on-desktop-apps?hl=en

Guess you like

Origin blog.csdn.net/hzxOnlineOk/article/details/131412882