[javascript] Ember.js에서 사용되는 소셜 로그인 기능은 어떻게 구현하나요?

04 Dec 2023

javascript

소셜 로그인 API 설정 먼저, 소셜 로그인 기능을 사용하기 위해 해당 소셜 플랫폼의 개발자 사이트에 가서 API를 등록해야 합니다. 각 소셜 플랫폼은 고유한 API 키를 제공하며, 이를 사용하여 소셜 로그인 기능을 구현할 수 있습니다.
Ember.js 애드온 설치 Ember.js에서 소셜 로그인을 구현하기 위해 필요한 애드온을 설치해야 합니다. 일반적으로 ember-simple-auth와 torii 애드온을 사용합니다. 이 애드온은 소셜 로그인 기능을 쉽게 구현할 수 있도록 도와줍니다.
```
ember install ember-simple-auth
ember install torii
```

컨트롤러 및 라우트 설정 Ember.js에서는 torii 애드온을 통해 소셜 로그인을 처리하는 컨트롤러와 라우트를 설정해야 합니다. 각 소셜 플랫폼은 고유한 컨트롤러 및 라우트 설정이 필요할 수 있습니다.

// app/controllers/login.js
import Controller from '@ember/controller';
import { inject as service } from '@ember/service';

export default Controller.extend({
  session: service('session'),
  torii: service(),

  actions: {
    async loginWith(provider) {
      let torii = this.get('torii');

      try {
        let toriiResponse = await torii.open(provider);
        this.get('session').authenticate('authenticator:custom', toriiResponse);
      } catch (error) {
        // Handle authentication error
      }
    }
  }
});

템플릿 설정 로그인 버튼을 템플릿에 추가해야 합니다. 이 버튼은 소셜 플랫폼의 로그인 페이지로 이동하도록 설정되어야 합니다.
```
   
<button >Google로 로그인</button>
<button >Facebook으로 로그인</button>
```

커스텀 인증기 설정 Ember.js에서는 커스텀 인증기를 설정하여 소셜 로그인 후 사용자를 인증할 수 있습니다.

// app/authenticators/custom.js
import Base from 'ember-simple-auth/authenticators/base';
import { inject as service } from '@ember/service';

export default Base.extend({
  torii: service(),

  async authenticate(options) {
    let torii = this.get('torii');
    let provider = options.provider;

    try {
      let toriiResponse = await torii.open(provider);
      return toriiResponse;
    } catch (error) {
      // Handle authentication error
    }
  }
});

이제 Ember.js에서 소셜 로그인을 구현할 준비가 되었습니다. 위의 단계를 참고하여 각 소셜 플랫폼에 대한 API 키 및 설정을 추가하고, 컨트롤러, 라우트, 템플릿 및 커스텀 인증기를 설정하십시오. 이렇게 구현하면 소셜 로그인 기능을 사용할 수 있습니다.

힌트: 이 자습서는 Ember.js 3.x 버전을 기준으로 작성되었습니다. Ember.js의 버전에 따라 일부 단계가 다를 수 있으므로 공식 문서를 참조하시는 것을 권장합니다.

참고 자료