Google Drive API V3 與 Angluar 整合 Example
Google Drive API V3 與 Angluar 整合範例
https://github.com/kirinchen/google-drive-angular/
大致的功能如下
- 登入/登出
- 顯示列表By File Tyoe
- read 檔案內容
如何申請Google Drive 開發者金鑰和Oauth
最近本人開始騎單車的爬坡,所以開發了一個爬坡小工具,那就會用到Google Map API,這邊先做個預告,順便寫個Gmap小筆記啦
創建API Key
1.先到 Google雲端後台 . https://console.developers.google.com/apis/dashboard
2.請先選擇一個專案 (如果沒有請按建立) 
3.啟用API,
- 資料庫 >
- 搜尋 : Google Drive API
- 啟用 Google Drive API
- 先到憑證,並建立API KEY
5.再到 Google雲端後台 . Google Cloud Platform Console 並選則憑證 
這邊可以看之前申請的Key,也可以複製金鑰
建立OAuth 2.0 用戶端 ID
建立OAuth 同意畫面填入基本資料即可 
選擇建立OAuth 2.0 用戶端 ID 
建立OAuth 同意畫面填入基本資料即可 
選擇建立OAuth 2.0 用戶端 ID 
下載專案與專案設定
- 下載 https://github.com/kirinchen/google-drive-angular.git 或者
git clone https://github.com/kirinchen/google-drive-angular.git - cd 到 [root ]] 專案下/
- run
npm install - 修改 [root]/src/environments/environment.ts
export const environment = {
production: false,
clientId: '{OAuth 2.0 用戶端 ID}',
apiKey: '{API KEY}'
};
git clone https://github.com/kirinchen/google-drive-angular.gitnpm installexport const environment = {
production: false,
clientId: '{OAuth 2.0 用戶端 ID}',
apiKey: '{API KEY}'
};Run server
Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
Code scaffolding
Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.
Build
Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.
Further help
To get more help on the Angular CLI use ng help or go check out the Angular CLI README.
Dev
Main Logic is src/app/auth/auth.component.ts
留言
張貼留言