你好,我不熟悉react-native,我开始使用护照开发facebook登录,并在本地反应表达js .
我实现了代码,但是当我点击登录Facebook时,它将打开浏览器并给出错误
无法获得身份验证/脸书
我的网址是http://localhost:8081/auth/facebook作为有效的Oauth重定向网址
我不知道如何在Facebook开发者控制台中将有效的Url放入有效的Oauth重定向网址中
我在我的项目中创建了后端文件夹并创建了config.js server.js文件
我的server.js如下
import express from 'express';
import passport from 'passport';
import FacebookStrategy from 'passport-facebook';
import GoogleStrategy from 'passport-google-oauth20';
// Import Facebook and Google OAuth apps configs
import { facebook, google } from './config';
// Transform Facebook profile because Facebook and Google profile objects look different
// and we want to transform them into user objects that have the same set of attributes
const transformFacebookProfile = (profile) => ({
name: profile.name,
avatar: profile.picture.data.url,
});
// Transform Google profile into user object
const transformGoogleProfile = (profile) => ({
name: profile.displayName,
avatar: profile.image.url,
});
// Register Facebook Passport strategy
passport.use(new FacebookStrategy(facebook,
// Gets called when user authorizes access to their profile
async (accessToken, refreshToken, profile, done)
// Return done callback and pass transformed user object
=> done(null, transformFacebookProfile(profile._json))
));
// Register Google Passport strategy
passport.use(new GoogleStrategy(google,
async (accessToken, refreshToken, profile, done)
=> done(null, transformGoogleProfile(profile._json))
));
// Serialize user into the sessions
passport.serializeUser((user, done) => done(null, user));
// Deserialize user from the sessions
passport.deserializeUser((user, done) => done(null, user));
// Initialize http server
const app = express();
// Initialize Passport
app.use(passport.initialize());
app.use(passport.session());
// Set up Facebook auth routes
app.get('/auth/facebook', passport.authenticate('facebook'));
app.get('/auth/facebook/callback',
passport.authenticate('facebook', { failureRedirect: '/auth/facebook' }),
// Redirect user back to the mobile app using Linking with a custom protocol OAuthLogin
(req, res) => res.redirect('OAuthLogin://login?user=' + JSON.stringify(req.user)));
// Set up Google auth routes
app.get('/auth/google', passport.authenticate('google', { scope: ['profile'] }));
app.get('/auth/google/callback',
passport.authenticate('google', { failureRedirect: '/auth/google' }),
(req, res) => res.redirect('OAuthLogin://login?user=' + JSON.stringify(req.user)));
// Launch the server on the port 3000
const server = app.listen(8081, () => {
const { address, port } = server.address();
console.log(`Listening at http://${address}:${port}`);
});
和我的配置.js如下
export const facebook = {
clientID: 'MY CLIENT ID',
clientSecret: 'MY CLIENT SECRET',
callbackURL: 'http://localhost:8081/auth/facebook/callback',
profileFields: ['id', 'name', 'displayName', 'picture', 'email'],
};
export const google = {clientID:'MY CLIENT ID',clientSecret:'MY CLIENT SECRET',callbackURL:'http://localhost:8081/auth/google/callback',};
和我的包.json如下
{
"name": "backend",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node node_modules/nodemon/bin/nodemon.js -- node_modules/babel-cli/bin/babel-node.js server.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel": "^6.23.0",
"babel-cli": "^6.24.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"nodemon": "^1.11.0"
},
"dependencies": {
"cookie-session": "^2.0.0-beta.2",
"express": "^4.15.3",
"passport": "^0.3.2",
"passport-facebook": "^2.1.1",
"passport-google-oauth20": "^1.0.0"
}
}
我需要知道如何将有效的localhost url放在开发者控制台和应用程序中 .
以及如何解决这个问题无法获得auth / facebook错误
1 回答
使用Facebook SDK for React Native https://github.com/facebook/react-native-fbsdk . 您所要做的就是安装此SDK:
然后链接它以反应原生项目:
按照repo中的说明进行设置后,使用facebook实施登录,如下所示 -
就是这样,你应该能够登录!