google drive加密/解密文件的網頁版小工具

-

 

drive-cipher-toolkit

https://github.com/kirinchen/drive-cipher-toolkit

A web-based toolkit to document of google drive encryption & decrypt

最近開發了一個基於網頁的小工具，用於google drive加密/解密文件

專案開發/設定

  • 步驟 1：安裝 Node.js 和 npm
    React 需要 Node.js 環境來運行，所以首先需要安裝 Node.js。你可以從官方網站（https://nodejs.org）下載並安裝 Node.js。

安裝完 Node.js 之後，你也會同時獲得 npm（Node Package Manager）。npm 是一個用於安裝和管理 JavaScript 套件的工具，我們將在後續步驟中使用到它。




REACT_APP_GAPI_API_KEY={Google API Key}
REACT_APP_GAPI_OAUTH_CLIENT_ID={Google Auth Client ID}
REACT_APP_VERSION=0.1.0

Google API Key & Google Auth Client ID 請參考 瞭解驗證相關資訊和授權

設定OAuth 同意畫面>範圍請設定以下權限








'https://www.googleapis.com/auth/drive',
'https://www.googleapis.com/auth/drive.file',
'https://www.googleapis.com/auth/drive.readonly',
'https://www.googleapis.com/auth/drive.metadata.readonly',
'https://www.googleapis.com/auth/drive.appdata',
'https://www.googleapis.com/auth/drive.metadata',
'https://www.googleapis.com/auth/drive.photos.readonly'
  • 步驟 5: 下指令 npm start

這將啟動一個本地開發服務器，並在瀏覽器中打開你的 React 項目。

How To Use

  • 點擊 -> 
  • Google 登入
  • 輸入一個你google drive的檔案名稱(須完整)
  • 加密你的文件

A 輸入加密密碼
B 點擊上傳覆蓋

  • 此時已經加密完成
  • 要解密時下次下方輸入密碼就可以解密了
tags: 手做小專案

留言

張貼留言

這個網誌中的熱門文章

angular 如何Http 如何設定 CORS (Cross-Origin Resource Sharing)

-
如果要對所有送出的 Request 做調整 之前我在寫後台的,就可以使用AOP的方式實作, 而Angular也有類似的架構 如果我們用  @angular/common/http  Angular只要實作 HttpInterceptor  interface就可以了 實作 HttpInterceptor 在cmd輸入 ng g service BasicAuthHtppInterceptor 已建立BasicAuthHtppInterceptorService ,修改內容如下 import { Injectable } from '@angular/core' ; import { HttpInterceptor, HttpRequest, HttpHandler } from '@angular/common/http' ; @Injectable ({ providedIn: 'root' }) export class BasicAuthHtppInterceptorService implements HttpInterceptor { constructor ( ) { } intercept(req: HttpRequest< any >, next: HttpHandler) { req = req.clone({ setHeaders: { /*有關CORS的參數就可以改在這裡了*/ 'Access-Control-Allow-Origin' : '*' , 'Access-Control-Allow-Credentials' : 'true' , 'Access-Control-Allow-Methods' : 'GET, PUT, POST, DELETE, OPTIONS, PATCH' , 'Access-Control-Max-Age' : '86400' } }); return
閱讀完整內容

Google Map 單車路徑計算坡度和角度小工具

-
圖片
  Google Map 單車路徑計算坡度和角度小工具 本人最近開始稍微開始認真騎腳踏車,然後我常用google map 去安排路線(癡迷上自己亂排路線的快感 XD) 但是常常google會帶入非人性化的路線,例如用走的都幾乎走不上去,於似乎本人找了幾個工具 像是 bikeroll 非常直觀好用,但是坡度顯示不精準 (12% ~ 48% <--- 48%會往生XD) 所以本人就想說來開發一個能夠自己決定每幾公尺就計算這個區段的坡度的工具,工具網址如下 https://mapsteepness.web.app 源始碼 Github :  https://github.com/kirinchen/map-steepness-gradient 設定教學 一進入網站就會先到設定頁  https://mapsteepness.web.app/config 設定基本參數 設定說明 A: 設定語系 B: 設定每幾公尺為一個路徑 C :設定 Google Map 金鑰,請看此  教學 Google Map 金鑰要啟用 Directions API / Maps Elevation API / Maps JavaScript API 三個服務 啟用服務教學 :  教學 為什麼要此金鑰,因為Google這幾年增加圖資的費用,所以很多地圖相關的APP都取消服務,而我們採用各自申請金鑰來提供此服務,且沒有超過一定的使用量基本上是免費的 操作教學 1. 準備單車路徑的KML檔案 google map 匯出KML教學 範例檔案 ：  點我下載 KML  Wiki 2. 匯入KML檔案到 mapsteepness 系統中 :  連結   3. 等匯入完成 就可以點選 路徑列表   4. 查看此次路徑，的每個路徑分段，並選擇要在地圖上觀察的分段 可以用上面的過濾器 透過夾角或是坡度來篩選 要的路徑 起點/終點 : 標示路段起點/終點的經緯度 距離 : 該路段的長度 海拔 : 終點的海拔高度 坡度/夾角 : 該路段的爬升坡度,與夾角 選取 : 選區的路段可以顯示在地圖上 5. 顯示在地圖上  5.1 點選其中的一段的路徑 點擊地圖標示 起點/終點   : 起點   : 終點 點擊後可以看到 海拔 / 該路段距離/ 坡度 等資訊 點擊 Open Gmap : 開啟該點位在google map 
閱讀完整內容

Google URL Shortener API 快速教學

-
圖片
有時候需要短網址時,都會用到 估哥大神 的 goo.gl  那麼可否透過程式就可以使用! 答案是可以的, 這邊就如何透過Rest 去呼叫 這個API 先去 google dev consloe  點選  URL Shortener API 然後點擊啟用,  點擊完會看到下圖,最後的字樣要是"停用"就表示啟用成功 然後點擊憑證 建立憑證,選擇API Key 選擇 瀏覽器憑證(看需要什麼平台,然後選擇什麼) 然後設定憑證的設定 那麼基本上,可你的網站的domain,那我為了Test ,所以就填 * (填 * 是很危險的,任何人都可以使用) 然後按"建立" 複製API Key 本人是透過Rest Test 小工具( PostMan )來測試的 那測試如下 那麼Rest 資訊如下 url : https://www.googleapis.com/urlshortener/v1/url?key={API_KEY} header :         Content-Type = application/json Request body  {"longUrl": "{要縮短的網址}"} Response Body {     "kind": "urlshortener#url",     "id": "{你要的短網址}",     "longUrl": "http://www.google.com/" } BTW 剛申請完 不會馬上有效,要等大概5分鐘
閱讀完整內容