Passport를 사용하여 Node.js 애플리케이션에 대한 소셜 인증 제공

비밀번호가 본질적으로 취약하다는 것은 널리 알려진 사실입니다. 따라서 최종 사용자에게 사용하는 모든 애플리케이션에 대해 강력한 비밀번호를 생성하도록 요구하면 상황은 더욱 악화될 뿐입니다.

간단한 해결 방법은 사용자가 기존 소셜 계정(예: Facebook, Twitter, Google 등)을 통해 인증하도록 하는 것입니다. 이 기사에서는 Passport 미들웨어를 사용하여 Facebook 및 Twitter 계정으로 인증할 수 있도록 이 소셜 로그인 기능을 이 인증 시리즈의 첫 번째 부분에 추가할 것입니다.

이전 기사를 아직 읽지 않으셨다면, 이 기사를 기반으로 새로운 전략, 경로 및 관점을 구축할 예정이므로 꼭 읽어보시기를 권합니다.

소셜 로그인

초보자에게 소셜 로그인은 Facebook, Twitter 등과 같은 소셜 네트워킹 사이트의 기존 정보를 사용하는 Single Sign-On입니다. 일반적으로 사용자는 이미 계정을 만들었어야 합니다.

소셜 로그인은 주로 OAuth 2.0과 같은 인증 방식을 사용합니다. OAuth에서 지원하는 다양한 로그인 흐름에 대해 자세히 알아보려면 이 문서를 읽어보세요. Facebook, Twitter, Google, GitHub 등 다양한 OAuth 공급자를 위한 다양한 모듈을 제공하기 때문에 소셜 로그인을 처리하기 위해 Passport를 선택했습니다. 이 기사에서는 Passport-facebook 및 Passport-twitter 모듈을 사용하여 기존 Facebook 또는 Twitter 계정을 통해 로그인 기능을 제공합니다.

페이스북 인증

Facebook 인증을 활성화하려면 먼저 Facebook 개발자 포털을 사용하여 Facebook 앱을 만들어야 합니다. 앱 ID와 앱 비밀을 기록한 다음 설정으로 이동하여 웹사이트 섹션에서 웹사이트 URL을 지정하여 콜백 URL을 지정하세요. 애플리케이션. 또한 연락처 이메일 필드에 유효한 이메일 주소를 입력했는지 확인하세요. 이 애플리케이션은 대중에게 공개되고 액세스 가능해야 합니다.

다음으로 상태 및 검토 섹션으로 이동하여 슬라이더를 예로 돌려 앱을 공개로 설정하세요. Facebook에 연결하는 데 필요한 구성 정보를 보관하기 위해 구성 파일 fb.js를 만듭니다.

으아아아

Facebook 로그인 전략

Node 애플리케이션으로 돌아가서 이제 FacebookStrategy 모듈을 사용하여 Facebook 인증을 위한 Passport 전략을 정의하고 위 설정을 활용하여 사용자의 Facebook 프로필을 가져오고 보기에 세부 정보를 표시합니다. 으아아아

라우팅 구성

이제 사용자가 Facebook 계정을 사용하도록 애플리케이션을 승인한 후 Facebook 로그인을 활성화하고 콜백을 처리하기 위한 몇 가지 경로를 추가해야 합니다.

으아아아

데모 앱의 로그인 페이지는 다음과 같습니다:

Facebook으로 로그인 버튼을 클릭하면 Facebook으로 인증을 시도합니다. 이미 Facebook에 로그인되어 있는 경우 권한을 요청하는 다음 대화 상자가 표시되며, 그렇지 않으면 Facebook에 로그인하라는 메시지가 표시되고 이 대화 상자가 표시됩니다.

앱이 공개 프로필과 이메일 주소를 수신하도록 허용하면 등록된 콜백 기능이 사용자 세부 정보와 함께 호출됩니다. 나중에 참조할 수 있도록 이 정보를 저장하거나, 표시하거나, 원하는 대로 무시하도록 선택할 수 있습니다. 자유롭게 뛰어넘어 이 git 저장소의 전체 코드를 확인해 보세요.

이 데모 애플리케이션에서 제공하는 기본 정보 외에도 적절한 범위를 사용하고 사용자 프로필을 통해 받은 액세스 토큰으로 Facebook API를 사용하여 동일한 인증 메커니즘을 사용할 수도 있다는 점은 주목할 가치가 있습니다.

트위터 인증

트위터를 통한 인증을 처리하려면 유사한 인증 모듈을 연결해야 하며 여권-트위터 모듈을 지원하려면 Passport 칩을 연결해야 합니다.

먼저 애플리케이션 관리 인터페이스를 사용하여 새 Twitter 애플리케이션을 만들어야 합니다. 여기서 주의할 점은 콜백 URL을 지정할 때 콜백 URL 필드에 "localhost"를 지정하면 트위터가 제대로 작동하지 않는 것 같습니다. 개발하는 동안 이러한 제한을 극복하려면 "localhost" 대신 특수 루프백 주소 또는 "127.0.0.1"을 사용할 수 있습니다. 애플리케이션을 생성한 후 아래와 같이 구성 파일에 다음 API 키와 비밀 정보를 기록해 두세요.

으아아아

트위터 로그인 전략

Twitter의 로그인 정책은 다음과 같은 TwitterStrategy 의 예입니다.

passport.use('twitter', new TwitterStrategy({
    consumerKey     : twitterConfig.apikey,
    consumerSecret  : twitterConfig.apisecret,
    callbackURL     : twitterConfig.callbackURL
  },
  function(token, tokenSecret, profile, done) {
    // make the code asynchronous
    // User.findOne won't fire until we have all our data back from Twitter
    process.nextTick(function() { 

	  User.findOne({ 'twitter.id' : profile.id }, 
        function(err, user) {
          // if there is an error, stop everything and return that
		  // ie an error connecting to the database
	      if (err)
	        return done(err);

			// if the user is found then log them in
	        if (user) {
	           return done(null, user); // user found, return that user
	        } else {
	           // if there is no user, create them
	           var newUser                 = new User();

			   // set all of the user data that we need
	           newUser.twitter.id          = profile.id;
	           newUser.twitter.token       = token;
	           newUser.twitter.username = profile.username;
	           newUser.twitter.displayName = profile.displayName;
	           newUser.twitter.lastStatus = profile._json.status.text;

			   // save our user into the database
	           newUser.save(function(err) {
	             if (err)
	               throw err;
	             return done(null, newUser);
	           });
	        }
	     });
	  });
    })
);

配置路由

// route for twitter authentication and login
// different scopes while logging in
router.get('/login/twitter',  
  passport.authenticate('twitter')
);

// handle the callback after facebook has authenticated the user
router.get('/login/twitter/callback',
  passport.authenticate('twitter', {
	successRedirect : '/twitter',
	failureRedirect : '/'
  })
);

/* GET Twitter View Page */
router.get('/twitter', isAuthenticated, function(req, res){
  res.render('twitter', { user: req.user });
});

现在要对此进行测试，请务必使用 http://127.0.0.1:<port></port> 而不是使用 http: //localhost:<port></port>.正如我们上面已经提到的，在使用“localhost”作为主机名与 Twitter 交换令牌时似乎存在问题。单击使用 Twitter 登录按钮时，正如预期的那样，它会请求用户同意允许此应用程序使用 Twitter。

当您允许应用程序访问您的 Twitter 帐户和有限信息时，登录策略中注册的回调处理程序为调用，然后用于将这些详细信息存储在后端数据库中

结论

这就是你拥有的！我们成功地将 Facebook 和 Twitter 登录添加到示例应用程序中，而无需编写大量代码并通过让 Passport 完成繁重的工作来处理与身份验证机制相关的复杂问题。可以为 Passport 支持的各种提供程序编写类似的登录策略。整个应用程序的代码可以在此 git 存储库中找到。请随意扩展它并在您自己的项目中使用它。

위 내용은 Passport를 사용하여 Node.js 애플리케이션에 대한 소셜 인증 제공의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!