I am using Google drive API to download file from Google drive. I am using Javascript for that. Is it safe to have visible API keys in JS or I should use Node.js or something else? As you can see on the top of code, there are many keys (developer key, client id and app id). Is there any vulnerable in my code?
Here is my code:
var developerKey = '[key]';
var clientId = "[key]"
var appId = "[key]";
var scope = ['https://www.googleapis.com/auth/drive.file', 'https://www.googleapis.com/auth/drive'];
var pickerApiLoaded = false;
var driveLoaded = false;
var oauthToken;
// Use the Google API Loader script to load the google.picker script.
function loadPicker() {
gapi.load('auth', {'callback': onAuthApiLoad});
gapi.load('picker', {'callback': onPickerApiLoad});
gapi.load('client', function () {
gapi.client.load('drive', 'v2', function () {
driveLoaded = true;
});
});
}
function onAuthApiLoad() {
window.gapi.auth.authorize(
{
'client_id': clientId,
'scope': scope,
'immediate': false
},
handleAuthResult);
}
function onPickerApiLoad() {
pickerApiLoaded = true;
createPicker();
}
function handleAuthResult(authResult) {
if (authResult && !authResult.error) {
oauthToken = authResult.access_token;
createPicker();
}
}
// Create and render a Picker object for searching images.
function createPicker() {
if (pickerApiLoaded && oauthToken) {
var view = new google.picker.View(google.picker.ViewId.DOCS);
view.setMimeTypes("application/sla,application/vnd.ms-pki.stl,application/x-navistyle");
var picker = new google.picker.PickerBuilder()
.enableFeature(google.picker.Feature.NAV_HIDDEN)
.enableFeature(google.picker.Feature.MULTISELECT_ENABLED)
.setAppId(appId)
.setOAuthToken(oauthToken)
.addView(view)
.addView(new google.picker.DocsUploadView())
.setDeveloperKey(developerKey)
.setCallback(pickerCallback)
.build();
picker.setVisible(true);
}
}
// A simple callback implementation.
function pickerCallback(data) {
if (data.action == google.picker.Action.PICKED) {
var fileId = data.docs[0].id;
downloadFile(fileId, data.docs[0].name);
}
}
function downloadFile(fileId, fileName)
{
var request = gapi.client.drive.files.get({
fileId:fileId,
alt:"media"
}).then(function(resp){
$.post("PHP/save_file.php", {Type: "stl", Filename: fileName, Data: resp.body}, function(response) {
if (response == "OK")
{
}
});
});
}
function showPickerDialog(){
loadPicker()
}