我在 Google 中遇到了很多 OAuth 问题。我在 Azure 中部署了 2 个应用程序(前端在 React 中,后端在 Play (scala) 中)。 假设我们可以找到:
"backend.azure.net"
,"frontend.azure.net"
。我在后端应用中使用 Silhouette
。
我的 SocialAuthController :
class SocialAuthController @Inject()(scc: DefaultSilhouetteControllerComponents, addToken: CSRFAddToken)(implicit ex: ExecutionContext) extends SilhouetteController(scc) {
def authenticate(provider: String): Action[AnyContent] = addToken(Action.async { implicit request: Request[AnyContent] =>
(socialProviderRegistry.get[SocialProvider](provider) match {
case Some(p: SocialProvider with CommonSocialProfileBuilder) =>
p.authenticate().flatMap {
case Left(result) => Future.successful(result)
case Right(authInfo) => for {
profile <- p.retrieveProfile(authInfo)
res <- userRepository.getByEmail(profile.email.getOrElse(""))
user <- if (res == null) userRepository.create(profile.loginInfo.providerID, profile.loginInfo.providerKey, profile.email.getOrElse(""))
else userRepository.getByEmail(profile.email.getOrElse(""))
_ <- authInfoRepository.save(profile.loginInfo, authInfo)
authenticator <- authenticatorService.create(profile.loginInfo)
value <- authenticatorService.init(authenticator)
result <- authenticatorService.embed(value, Redirect(s"https://backend.azure.net?user-id=${user}"))
} yield {
val Token(name, value) = CSRF.getToken.get
result.withCookies(Cookie(name, value, httpOnly = false))
}
}
case _ => Future.failed(new ProviderException(s"Cannot authenticate with unexpected social provider $provider"))
}).recover {
case _: ProviderException =>
Forbidden("Forbidden")
}
})
}
我的路线:
# Authentication
POST /signUp controllers.SignUpController.signUp
POST /signIn controllers.SignInController.signIn
POST /signOut controllers.SignInController.signOut
GET /authenticate/:provider controllers.SocialAuthController.authenticate(provider: String)
silhouette.conf(谷歌部分):
# Google provider
google.authorizationURL="https://accounts.google.com/o/oauth2/auth"
google.accessTokenURL="https://accounts.google.com/o/oauth2/token"
google.redirectURL="https://backend.azure.net/authenticate/google"
google.clientID="my_id"
google.clientSecret="my_secret"
google.scope="profile email"
如您所见,我将令牌粘贴到 Redirect(s"http://backend.azure.net?user-id=${user}"))
中的链接。
我在前端应用中的 js 函数:
export function signInGoogle() {
const host = "https://backend.azure.net/"
const route = "authenticate/google";
const requestOptions = {
method: 'GET',
headers: { 'Content-Type': 'application/json' },
credentials: 'include',
mode: 'cors',
};
return fetch(host + route, requestOptions)
}
和重定向功能
export default function GoogleSignIn() {
const responseGoogle = () => {
window.location.href = "https://backend.azure.net/authenticate/google";
}
return (
<div>
<button onClick={responseGoogle}
className="add-to-cart-button register-bttn ingsoc ggl-bttn"> Login With Google </button>
</div>
)
}
如果您单击 login with google
,则会调用第二个函数。
在我的 google dev 帐户上,我有一些链接。我的 URI 标识符:
https://backend.azure.net
和 http://front.azure.net
和授权的 URI 重定向:
http://backend.azure.net/authenticate/google
点击“使用谷歌登录”后,我在网站上看到 403 forbidden
并在控制台中出现 3 个异常:
1 GET https://uj-ebiznes-back.azurewebsites.net/authenticate/google?state=very_long_link 403 (Forbidden)
Unchecked "long link on back " runtime.lastError: Could not establish connection. Receiving end does not exist.
Error handling response: "very long link to backend/authenticate/google"
TypeError: Cannot destructure property 'yt' of 'undefined' as it is undefined.
at chrome-extension://cmedhionkhpnakcndndgjdbohmhepckk/scripts/contentscript.js:535:6
有人能解释一下这里有什么问题吗?我不知道,我什么都试过了。