AngularJS + OAuth
Angular App 로그인 솔루션을 작성하려고 합니다.
이는 사용자가 Facebook/Google/Twitter 또는 Register를 통해 정상적으로 연결할 수 있음을 의미합니다.
Angular-OAuth는 유용하지만 Facebook(또는 Twitter)에서는 작동하지 않는 것 같습니다.
이 모든 것을 망라하는 솔루션을 아는 사람?
다음은 angular js와 함께 리다이렉트만 사용하는 간단한 예입니다.
다음으로 인증으로 리다이렉트 하는 방법을 나타냅니다.
angular.module('angularoauthexampleApp')
.controller('MainCtrl', function ($scope) {
$scope.login=function() {
var client_id="your client id";
var scope="email";
var redirect_uri="http://localhost:9000";
var response_type="token";
var url="https://accounts.google.com/o/oauth2/auth?scope="+scope+"&client_id="+client_id+"&redirect_uri="+redirect_uri+
"&response_type="+response_type;
window.location.replace(url);
};
});
인증 후 리다이렉트를 처리하는 방법은 다음과 같습니다.
angular
.module('angularoauthexampleApp', [
])
.config(function ($routeProvider) {
$routeProvider
.when('/access_token=:accessToken', {
template: '',
controller: function ($location,$rootScope) {
var hash = $location.path().substr(1);
var splitted = hash.split('&');
var params = {};
for (var i = 0; i < splitted.length; i++) {
var param = splitted[i].split('=');
var key = param[0];
var value = param[1];
params[key] = value;
$rootScope.accesstoken=params;
}
$location.path("/about");
}
})
});
상세한 것에 대하여는, http://anandsekar.github.io/oauth2-with-angularjs/ 를 참조해 주세요.
- Javascript에서의 간단한 구현
- 80개 이상의 OAuth 프로바이더
- 빠르고 안전한
freemium oauth.io 대신 free-Open-Source가 있습니다.hello .
Github의 Satelliteizer 프로젝트를 보세요.이제 막 시작했는데 유망해 보이네요.
JSON Web 토큰을 사용하여 이메일+패스워드, Facebook, Twitter, Google 및 기타 OAuth 1.0/2.0 공급자를 통한 로그인을 허용합니다.
클라이언트측 코드에 의해서, 서버측을 직접 실장할 필요가 있습니다.많은 서버 측 언어의 워크플로우와 코드 예에 대한 적절한 설명이 있습니다.
위에서 설명한 OAuth.io 솔루션의 Angular 코드 샘플과 코멘트를 추가하고 싶습니다.설립자가 말한 바와 같이 유료 서비스이지만, 저는 다음과 같은 두 가지 주요 이점이 있다고 생각합니다.
- Facebook, Twitter 등 OAuth 프로바이더에 접속하는 일관된 방법을 제공합니다.즉, 각 OAuth 프로바이더 구현의 모든 특성을 숨깁니다.
- 프론트 엔드 코드만을 사용하여 OAuth 소셜 버튼을 구현할 수 있습니다.
프런트 엔드 코드도 비교적 심플합니다.코더월에서 가져왔어요
import {Component, OnInit} from '@angular/core';
function _window(): any {
// return the global native browser window object
return window;
}
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
ngOnInit(): void {
const oauthScript = document.createElement('script');
oauthScript.src = 'https://cdn.rawgit.com/oauth-io/oauth-js/c5af4519/dist/oauth.js';
document.body.appendChild(oauthScript);
}
handleClick(e) {
// Prevents page reload
e.preventDefault();
// Initializes OAuth.io with API key
// Sign-up an account to get one
_window().OAuth.initialize('YOUR OAUTH.IO PUBLIC KEY');
// Popup Github and ask for authorization
_window().OAuth.popup('github').then((provider) => {
// Prompts 'welcome' message with User's name on successful login
// Check console logs for additional User info
provider.me().then((data) => {
console.log('data: ', data);
alert('Welcome ' + data.name + '!');
});
// You can also call Github's API using .get()
provider.get('/user').then((data) => {
console.log('self data:', data);
});
});
}
}
언급URL : https://stackoverflow.com/questions/18218293/angularjs-oauth
'programing' 카테고리의 다른 글
Axios 라이브러리의 시간 초과 기능이 작동하지 않습니다. (0) | 2023.04.03 |
---|---|
WooCommerce 주문에서 쿠폰 데이터 가져오기 (0) | 2023.04.03 |
jq를 사용하여 JSON의 2개 필드를 구성합니다. (0) | 2023.04.03 |
Java JSON 시리얼화 - 베스트 프랙티스 (0) | 2023.04.03 |
Spring Boot, logback 및 logging.config 속성 (0) | 2023.04.03 |