Ruby on rails ReactJs Web客户端+；RubyonRailsAPI服务器-通过facebook和；使用designe&x2B；OmniAuth

客户端，我可以通过OmniAuth连接到facebook或google_oauth2。但是在服务器端，我的身份验证失败了（根据身份验证类型的不同原因）

我按照设计指南与Omniauth（）集成，在集成到railsapi（）时考虑了Omniauth的建议

---反应应用程序---

src/components/socialAuth/socialAuth.jsx

从“React”导入React
从“反应facebook登录”导入FacebookLogin
从“反应谷歌登录”导入谷歌登录
导出默认值（{handleLogInWithProvider}）=>{
const responseFacebook=响应=>{
console.log（'facebook'，响应）
handleLogInWithProvider（'facebook'，响应）
}
const responsegogle=response=>{
log（'google_oauth2'，响应）
handleLogInWithProvider（'google_oauth2'，响应）
}
返回(
)
}

src/ducks/auth.js

export const logInWithProvider=（提供程序，响应）=>async dispatch=>{
const endpoint=`/users/auth/${provider}/callback`
常量选项={
方法：“POST”，
正文：JSON.stringify（响应），
标题：{
“内容类型”：“应用程序/json”
}
}
试一试{
const responseAPI=wait dispatch（fetch（{endpoint，options}））
console.log（responseAPI）
}捕获（错误）{
console.log（错误）
}
}

控制台显示Facebook和Google都返回一个完整的散列（带有凭据和用户配置文件信息）

---RoR API---

Gemfile

gem“设计”
gem'omniauth facebook'
gem'omniauth-google-oauth2'

config/initializers/designe.rb

#==>OmniAuth
#添加新的OmniAuth提供程序。有关设置的详细信息，请查看wiki
#在你的模型和挂钩上。
facebook\u app\u id=Rails.application.credentials
.api[：facebook][：oauth2][：app\u id]
facebook\u app\u secret=Rails.application.credentials
.api[：facebook][：oauth2][：app_secret]
google\u app\u id=Rails.application.credentials
.api[：谷歌][：oauth2][：应用程序id]
google\u app\u secret=Rails.application.credentials
.api[：google][：oauth2][：app_secret]
#config.omniauth:github，'APP\u ID'，'APP\u SECRET'，作用域：'user，public\u repo'
config.omniauth:facebook，
facebook应用程序id，
facebook\u应用程序\u机密，
范围：“电子邮件”
config.omniauth:google_oauth2，
谷歌应用程序id，
谷歌应用程序的秘密，
名称：'谷歌'，
#临时修复`身份验证失败！检测到csrf_`。。。
提供者忽略状态：Rails.env.development？

app/config/application.rb

#将OmniAuth集成到Rails API中。
config.session\u存储：cookie\u存储，键：“\u片间\u会话”
config.middleware.use ActionDispatch:：Cookies
config.middleware.use ActionDispatch:：Session:：CookieStore，config.Session\u选项

app/models/user.rb

designe:database\u authenticable，：registerable，
：可恢复，：可记忆，：可验证，
：omniauthable，omniauth\u提供者：%i[facebook google\u oauth2]

config/routes.rb

为用户设计，
仅：：omniauth_回调，
控制器：{omniauth_回调：'v1/omniauth_回调'}

app/controllers/v1/omniauth\u callbacks\u controller.rb

模块V1
类OmniAuthCallbackController

在rails控制台中，我对Facebook和Google发出了不同的错误消息，因为我请求了不同的身份验证策略，使用一次性代码流（混合身份验证）和Google

• 对于Facebook：

• 对于谷歌：

我通过在designe初始值设定项中添加

provider\u ignores\u state:true

找到了一种解决方法，但它似乎不安全

config/initializers/designe.rb

config.omniauth:google_oauth2，
谷歌应用程序id，
谷歌应用程序的秘密，
名称：'谷歌'，
#临时修复`身份验证失败！检测到csrf_`。。。
提供者忽略状态：Rails.env.development？

request.env['omniauth.auth']为什么是

nil

。您是否在开发人员控制台（浏览器）或服务器控制台中看到错误？我用其他信息编辑了我的帖子。。。

ERROR -- omniauth: (facebook) Authentication failure! no_authorization_code: OmniAuth::Strategies::Facebook::NoAuthorizationCodeError, must pass either a `code` (via URL or by an `fbsr_XXX` signed request cookie)

ERROR -- omniauth: (google_oauth2) Authentication failure! csrf_detected: OmniAuth::Strategies::OAuth2::CallbackError, csrf_detected | CSRF detected