Ionic+Angular2对接Rails后端：Facebook令牌认证流程咨询

嘿，结合你已经搭好的Rails后端（Devise + Facebook OmniAuth）和前端Ionic+Angular的现状，我来一步步拆解这个Facebook token认证的实现方案：

一、后端新增Facebook Token认证端点 #

首先咱们需要在Rails后端加一个专门处理Facebook token的控制器，用来验证前端传来的token并生成devise_auth_token：

1. 创建Omniauth回调控制器
   新建app/controllers/omniauth_callbacks_controller.rb，继承自devise_auth_token的基础控制器：

   class OmniauthCallbacksController < DeviseTokenAuth::ApplicationController
     def facebook
       # 从前端请求参数中获取Facebook的access_token
       facebook_token = params[:access_token]
   
       # 调用Facebook API验证token并获取用户信息
       user_info = fetch_facebook_user_info(facebook_token)
       return render json: { error: 'Invalid Facebook token' }, status: :unauthorized unless user_info
   
       # 查找或创建用户
       @user = User.find_or_initialize_by(email: user_info['email']) do |user|
         user.name = user_info['name']
         user.facebook_uid = user_info['id']
         user.provider = 'facebook'
         # 生成随机密码（Devise需要密码字段，用户无需知晓）
         user.password = SecureRandom.hex(16)
         user.password_confirmation = user.password
       end
   
       if @user.save
         # 生成devise_auth_token所需的认证信息
         @user.generate_auth_token!
         # 用active_model_serializer返回响应
         render json: @user, serializer: UserSerializer, status: :ok
       else
         render json: { errors: @user.errors.full_messages }, status: :unprocessable_entity
       end
     end
   
     private
   
     def fetch_facebook_user_info(token)
       # 调用Facebook的用户信息接口，获取邮箱、姓名、ID
       response = HTTParty.get("https://graph.facebook.com/v18.0/me?fields=id,name,email&access_token=#{token}")
       response.parsed_response if response.success?
     end
   end
   

2. 配置路由
   在config/routes.rb里更新devise_token_auth的路由，指定自定义的回调控制器：

   mount_devise_token_auth_for 'User', at: 'auth', controllers: {
     omniauth_callbacks: 'omniauth_callbacks'
   }
   

二、完善User模型与Serializer #

1. 添加Facebook相关字段
   先跑迁移给User模型加字段：

   rails generate migration AddFacebookFieldsToUsers facebook_uid:string provider:string
   rails db:migrate
   

   然后确保User模型包含devise_token_auth的模块：

   class User < ApplicationRecord
     include DeviseTokenAuth::Concerns::User
     # 其他已有的配置...
   end
   

2. 编写UserSerializer
   新建app/serializers/user_serializer.rb，确保返回devise_auth_token所需的认证字段：

   class UserSerializer < ActiveModel::Serializer
     attributes :id, :email, :name, :facebook_uid, :provider,
                :token, :client, :uid, :expiry
   
     def token
       object.tokens[object.current_token]['token']
     end
   
     def client
       object.current_token
     end
   
     def uid
       object.uid
     end
   
     def expiry
       object.tokens[object.current_token]['expiry']
     end
   end
   

三、前端对接流程 #

前端已经通过Cordova拿到Facebook的access_token了，接下来只需要：

• 向后端的POST /auth/facebook/callback接口发送请求，参数带上access_token
• 后端验证通过后，会返回包含用户信息和token、client、uid、expiry的响应
• 前端把这些认证字段存在本地存储（比如localStorage），之后的API请求都带上这些请求头：
  • access-token: [返回的token]
  • client: [返回的client]
  • uid: [返回的uid]

关键注意事项 #

• CORS配置：确保Rails后端允许前端域名跨域请求，可使用rack-cors gem配置
• Facebook API版本：注意更新代码中的Facebook API版本号，避免接口失效
• 错误处理：后端要处理token无效、用户创建失败等情况，返回清晰的错误信息给前端
• 安全校验：可以额外调用Facebook的debug_token接口，验证token的有效性和应用匹配度

内容的提问来源于stack exchange，提问作者Sparsh Samir