React native react native facebook登录出现错误，无法获取身份验证/facebook

您好，我对react native不太熟悉，我开始在react native中使用passport和express js开发facebook登录

我实现了该代码，但当我点击facebook登录时，它会打开浏览器并给出错误信息

无法获取身份验证/facebook

我的url作为有效的Oauth重定向url

我不知道如何将有效的Url放入facebook开发者控制台中的有效Oauth重定向Url中

我已经在我的项目中创建了后端文件夹，并创建了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}`);
});

  {
    "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"
    }
  }

我的config.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'],
};

导出常量google={ clientID:“我的客户ID”， clientSecret:“我的客户秘密”， 回调URL:“”， };

我的package.json如下所示

    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}`);
});

  {
    "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

---

以及如何解决无法获取身份验证/facebook错误

使用facebook SDK进行React Native。您只需安装此SDK：

react-native install react-native-fbsdk

然后将其链接到react本机项目：

react-native link react-native-fbsdk

一旦您按照repo中的指示进行了设置，请按如下所示使用facebook登录-

const FBSDK = require('react-native-fbsdk');
const {
   LoginButton,
   AccessToken
} = FBSDK;

var Login = React.createClass({
   render: function() {
     return (
       <View>
         <LoginButton
           publishPermissions={["publish_actions"]}
           onLoginFinished={
             (error, result) => {
               if (error) {
                 alert("login has error: " + result.error);
               } else if (result.isCancelled) {
                 alert("login is cancelled.");
               } else {
                 AccessToken.getCurrentAccessToken().then(
                  (data) => {
                     alert(data.accessToken.toString())
                  }
               )
             }
          }
        }
        onLogoutFinished={() => alert("logout.")}/>
     </View>
   );
 }
 });

const FBSDK=require（'react-native-FBSDK'）；
常数{
登录按钮，
AccessToken
}=FBSDK；
var Login=React.createClass({
render:function（）{
返回(
{
如果（错误）{
警报（“登录有错误：+result.error”）；
}否则如果（结果被取消）{
警报（“登录被取消”）；
}否则{
AccessToken.getCurrentAccessToken（）。然后(
（数据）=>{
警报（data.accessToken.toString（））
}
)
}
}
}
onLogoutFinished={（）=>警报（“注销”）}/>
);
}
});

就这样，你应该可以登录了