가피 가져오기.auth2 in angular 2 type 스크립트
Google gapi에서 일부 클래스나 함수를 가져오려고 했습니다.auth2를 입력합니다.하지만 아래 코드는 내가 gapi를 정확하게 추가해도 절대 작동하지 않습니다.타이핑 디렉토리에 auth2 유형이 있습니다.
import { GoogleAuth } from 'gapi.auth2';
항상 오류가 발생했습니다.
Error TS2307: Cannot find module 'gapi.auth2'
다음과 같은 상대적 디렉토리 검색을 사용할까요?../../typings/gapi.auth2?
아니면 내가 가피를 사용하는 방식이 완전히 잘못된 것일까요?
감사합니다!
사용하기gapi그리고.gapi.authAngular2의 경우 NPM을 사용하여 유형 스크립트 정의를 설치합니다.
npm install --save @types/gapi
npm install --save @types/gapi.auth2
이렇게 하면 @types/gapi 및 @types/gapi라는 두 개의 패키지가 설치됩니다.의 auth2node_modules(를) 저장한 후 을 저장합니다.package.json.
귀하의 사검을 합니다.node_modules폴더를 선택하여 올바르게 설치되었는지 확인합니다.Angular 앱이 "main-app"이라고 불리는 경우 다음과 같이 표시됩니다.
main-app/
node_modules/
@types/
gapi/
gapi.auth2/
빨간색 알약과 파란색 알약 시나리오:
- 형식 컴파일러 옵션을 제공하지 않은 경우 명시적으로 추가할 필요가 없습니다.
gapi또는gapi.auth2에▁"types": []의tsconfig.json
- 으로 표시되는 항목은 다음과 .
@types패키지는 컴파일 중에 포함됩니다. - 의 패키지
node_modules/@types(모든 동봉 폴더의) 항목이 표시되는 것으로 간주됩니다.
- 근데. 만약에.
types이미 지정되어 있습니다. TS 구성 참조에서는 를 추가해야 한다고 설명합니다.gapi또는gapi.auth2그렇지 않으면 기본적으로 포함되지 않습니다.합니다.tsconfig.json신규포를gapi그리고.gapi.auth2선택사항:
{
"compilerOptions": {
"types": ["jest", "lodash", "gapi", "gapi.auth2"]
}
}
이 시점에서 동기 부여가 충분하다고 생각되면 Typescript Module Resolution(유형 스크립트 모듈 해상도)을 읽을 수 있습니다. How Node.js solves module:
노드는 이름이 지정된 특수 폴더에서 모듈을 찾습니다.
node_modules.a.node_modules동일한 수 . 현재 파일 또는 디렉터리 체인의 상위 파일입니다.노드가 위로 이동합니다. 렉리체인살다, 각을봅니펴각토디를 디렉토리 체인.node_modules로드하려는 모듈입니다.
요소"Angular2"를 이라면 어디서나 gapi또는gapi.auth2).
만약 이 그나참추경에 gapi또는gapi.auth2 TypeScript를 ..ts설된파를 npm install(참고, 당신은 다음을 유지해야 합니다.///그렇지 않으면 오류가 발생합니다):
/// <reference path="../../node_modules/@types/gapi/index.d.ts" />
에, 의 경로는 여러분의 수 ..ts파일은 TypeScript 정의를 설치한 위치와 관련이 있습니다.
했든, 해결 을 사용했든 에, TypeScript의 Node는 여전히 변수를 ..ts에 대해 Angular가 알 수합니다.gapi컴파일 시 변수입니다.더하다declare var gapi: any;의 신에게에..ts클래스 정의 내에 배치하지 않는 파일입니다.나는 내 것을 수입품 바로 아래에 두었습니다.
// You may not have this explicit reference.
/// <reference path="../../node_modules/@types/gapi/index.d.ts" />
import { NgZone, Injectable, Optional } from '@angular/core';
declare var gapi: any;
TypeScript 문서에서 다른 JavaScript 라이브러리와 함께 작업하는 것은 이 모든 작업을 통해 얻을 수 있는 것을 이해하기 위해 읽을 가치가 있습니다.
다음으로 로드합니다.gapi사용자 자신의 기능(앵글 서비스일 수 있음)에서 클라이언트:
loadClient(): Promise<any> {
return new Promise((resolve, reject) => {
this.zone.run(() => {
gapi.load('client', {
callback: resolve,
onerror: reject,
timeout: 1000, // 5 seconds.
ontimeout: reject
});
});
});
}
이 기능은 중요하지 않습니다. 여기에 이유가 있습니다...
첫째, 콜백이 아닌 구성 개체를 사용하여 gapi.load를 호출합니다.GAPI 기준 상태는 다음 중 하나를 사용할 수 있습니다.
- 라이브러리 로드가 완료되면 호출되는 콜백 함수입니다.
- 이 메서드에 대한 다양한 구성 매개 변수를 캡슐화하는 개체입니다.콜백만 필요합니다.
구성 옵션을 사용하면 라이브러리를 로드할 때 약속 시간이 초과되거나 오류가 발생했을 때 약속을 거부할 수 있습니다.제 경험상 라이브러리를 로드하는 것은 초기화하는 것보다 실패하는 경우가 더 많기 때문에 구성 개체가 단순한 콜백보다 더 좋습니다.
두번째로, 우리는 포장을 하고 있습니다.gapi.load
this.zone.run(() => {
// gapi.load
});
NgZone.run이 문서화되고 상태가 표시됩니다.
통해 기능
zone.run각도 영역 외부에서 실행된 작업에서 각도 영역을 다시 입력할 수 있습니다 [...].
이것이 바로 우리가 원하는 것입니다.gapi.loadAngular 영역을 벗어납니다.이를 생략하면 디버깅하기 어려울 수 있는 매우 펑키한 결과가 발생할 수 있습니다.
번째로, 째로세번,,loadClient()해결된 약속을 반환합니다. - 호출자가 처리 방법을 선택할 수 있습니다.gapi.load를 들면 우리의 예를들우의경우리어▁our경우.loadClient서비스인 "Angular"에 .apiLoaderServce구성 요소가 사용할 수 있습니다.ngOnInit기싣위를 gapi:
ngOnInit(): void {
this.apiLoaderService.loadClient().then(
result => this.apiLoaded = true,
err => this.apiLoaded = false
);
}
한번만gapi.load호출되었습니다.gapi.client준비가 되면 API 키, OAuth 클라이언트 ID, 범위 및 API 검색 문서를 사용하여 JavaScript 클라이언트를 초기화하는 데 사용해야 합니다.
initClient(): Promise<any> {
var API_KEY = // Your API key.
var DISCOVERY_DOC = // Your discovery doc URL.
var initObj = {
'apiKey': API_KEY,
'discoveryDocs': [DISCOVERY_DOC],
};
return new Promise((resolve, reject) => {
this.zone.run(() => {
gapi.client.init(initObj).then(resolve, reject);
});
});
}
NgZone.run 친구는 Angular Zone을 다시 입력하기 위해 다시 한 번 사용됩니다.
실제로, 나는 덧붙입니다.loadClient()그리고.initClient()각 서비스로 이동합니다. 구성 요소앱 요소 는 높은수의일성구요소에준다서(니반으로 요바앱구로아래소합초화성기)로 합니다.ngOnInit:
ngOnInit(): void {
this.apiLoaderService.loadClient().then(
result => {
this.apiLoaded = true;
return this.apiLoaderService.initClient()
},
err => {
this.apiFailed = true;
}
).then(result => {
this.apiReady = true;
}, err => {
this.apiFailed = true;
});
}
마지막으로 gapi 스크립트 파일을 파일에 추가해야 합니다.
<html>
<head>
<script src="https://apis.google.com/js/api.js"></script>
다음을 사용하면 안 됩니다.async 또는 deferGapi 라이브러리가 로드되기 전에 Angular 월드가 들어가게 되므로 속성을 입력합니다.
<!-- This will not work. -->
<html>
<head>
<script async defer src="https://apis.google.com/js/api.js"></script>
나는 이전에 페이지 로드 속도를 빠르게 유지하기 위해 gapi 라이브러리의 최소화된 로컬 복사본을 로드할 것을 제안했습니다./main-app/src/assests폴더 및 가져오기:
<html>
<head>
<script src="assets/api.js"></script>
하지만, 저는 이것을 하지 않는 것을 강력히 추천합니다.Google이 https://apis.google.com/js/api.js 을 업데이트하면 클라이언트가 손상될 수 있습니다.저는 이것에 두 번이나 걸려들었습니다.결국 수입하는 것이 더 나았습니다.//apis.google.com/js/그리고 그것을 차단 통화로 유지합니다.
이것은 RxJS 라이브러리를 사용하기 위해 @Jack의 답변에서 수정되었습니다.원래 질문은 Angular 2를 묻는 것이지만, 누군가 업데이트된 버전으로 작업할 경우를 대비하여 여기서 Angular 5를 사용하고 있습니다.
첫 번째 단계는 npm으로 gapi 유형을 다운로드하는 것과 동일합니다.
npm install --save @types/gapi npm install --save @types/gapi.auth2tsconfig.json을 업데이트해야 합니다.문제가 있는 경우 tsconfig.app.json 및 tsconfig.spec.json도 업데이트해야 할 수 있습니다.tsconfig.json에서 상속되지만 유형을 지정하면 기본값을 덮어쓸 수 있습니다.아래의 토막글:
"typeRoots": [ "node_modules/@types" ], "types": [ "gapi", "gapi.auth2" ], "lib": [ "es2017", "dom" ]Google의합니다.
platform.js나는 내 것을 넣었습니다.index.html빠뜨렸습니다async그리고.defer@잭의 권고대로<script src="https://apis.google.com/js/platform.js"></script>그런 다음 인증 서비스를 만듭니다.전체 코드는 다음과 같습니다.
import { Injectable, NgZone, Output } from '@angular/core'; import { Observable } from 'rxjs/Observable'; import { BehaviorSubject } from 'rxjs'; import { HttpClient } from '@angular/common/http'; import { User } from './User'; @Injectable() export class AuthenticatorService { public auth2: any; public user$: BehaviorSubject<User> = new BehaviorSubject<User>(null); public isLoggedIn$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false); public isLoaded$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false); constructor(private zone: NgZone, private http: HttpClient) { } validateToken(token: string): Observable<User> { return this.http.get<User>(`http://yourServer:3000/validationApi/${token}`); } signIn(): void { this.auth2.signIn().then(user => { this.validateToken(user.getAuthResponse().id_token).subscribe(user => { this.zone.run(() => { this.user$.next(user); this.isLoggedIn$.next(true); }); }, (err) => { console.error(err); }); }); }; signOut(): void { this.auth2.signOut().then(() => { this.zone.run(() => { this.isLoggedIn$.next(false); this.user$.next(null); }); }, (err) => { console.error(err); }); } loadAuth2(): void { gapi.load('auth2', () => { gapi.auth2.init({ client_id: 'yourClientId', fetch_basic_profile: true }).then((auth) => { this.zone.run(() => { this.auth2 = auth; this.isLoaded$.next(true); }); }, ); }); } }
우리는 여기서 많은 일들이 일어납니다.RxJS BehaviorSubjects는 다음과 같습니다.이를 사용하여 구성 요소에 변경 사항을 알립니다.우리들의loadAuth2함수는 Google의 라이브러리를 사용하여gapi.auth2.GoogleAuth물건.Google의 인증 라이브러리에 대한 자세한 정보가 필요한 경우 소개 또는 문서를 확인하십시오.사용 중인 노트this.zone.run일단 우리가 우리의 것을 얻으면GoogleAuth이의를 제기에서 전체 기능을 실행하는 것은 저에게 예상치 못한 행동으로 이어졌습니다.다음은 RxJS입니다.BehaviorSubject isLoaded$값을 true로 설정합니다.은 다에서유확수있다습니에서 을 볼 수 입니다.signIn()그리고.signOut() - 능기 - 합니다.NgZone그리고 우리의 적절한 업데이트.BehaviorSubject.
이제 우리 서비스가 나왔으니 이용할 시간입니다.로그인 및 로그아웃을 위한 구성 요소를 생성합니다.코드는 다음과 같습니다.
import { Component, OnInit } from '@angular/core'; import { AuthenticatorService } from '../authenticator.service' import { User } from '../User'; @Component({ selector: 'sign-in', template: ` <ng-container *ngIf="authIsLoaded"> <button *ngIf="!isLoggedIn" (click)="signIn()">Sign In With Google</button> <button *ngIf="isLoggedIn" (click)="signOut()">Sign Out</button> </ng-container> <h2 *ngIf="authIsLoaded && isLoggedIn"> Signed in as {{user.name}} </h2>` }) export class GoogleAuthenticatorComponent implements OnInit { public authIsLoaded: boolean = false; public isLoggedIn: boolean = false; public user: User; constructor(private authenticatorService: AuthenticatorService) { } signIn(): void { this.authenticatorService.signIn(); }; signOut(): void { this.authenticatorService.signOut(); } ngOnInit() { this.authenticatorService.isLoaded$.subscribe( value => { this.authIsLoaded = value; }); this.authenticatorService.isLoggedIn$.subscribe( value => { this.isLoggedIn = value; }); this.authenticatorService.user$.subscribe( value => { this.user = value; }); this.authenticatorService.loadAuth2(); } }
은 여서가중부분은한입니다.ngOnInit실행. 서 Authenticator 변경 에 따라여기서 Authenticator Service의 변경사항을 구독하고 그에 따라 보기를 업데이트합니다.
이 단계들이 누군가가 gapi를 설치하는 데 도움이 되기를 바랍니다.그들의 프로젝트에서 auth2.
언급URL : https://stackoverflow.com/questions/38091215/import-gapi-auth2-in-angular-2-typescript
'programing' 카테고리의 다른 글
| if-elif-elif-else 조건을 기반으로 새 열 생성 (0) | 2023.06.20 |
|---|---|
| Python에서 dict.clear()와 {} 할당 간의 차이 (0) | 2023.06.15 |
| 컴파일 오류:'ASP.global_asax' 유형이 두 DLL에 모두 있습니다. (0) | 2023.06.15 |
| 경로에 따라 각도 4 성분 숨기기 및 표시 (0) | 2023.06.15 |
| 맵의 데이터를 처리하는 방법vue에서 액세스할 속성의 정의되지 않은 오류를 방지하기 위해 첫 번째 렌더에서 시작합니다. (0) | 2023.06.15 |