web-dev-qa-db-fra.com

Comment intégrer un dossier Google Drive à un site Web

J'ai un dossier dans Google Drive que j'aimerais intégrer à mon site Web. Je ne trouve pas de code intégré ni aucun élément documenté dans les articles de l'aide de Google Drive.

htmlgoogle-drive-apiembed
47
Mori

Les dossiers de Google Drive peuvent être incorporés et affichés dans les vues list et grid:

Vue liste

<iframe src="https://drive.google.com/embeddedfolderview?id=FOLDER-ID#list" style="width:100%; height:600px; border:0;"></iframe>


Vue de la grille

<iframe src="https://drive.google.com/embeddedfolderview?id=FOLDER-ID#grid" style="width:100%; height:600px; border:0;"></iframe>



[~ # ~] q [~ # ~] : Qu'est-ce qu'un ID de dossier (FOLDER-ID) et comment puis-je obtenir il?

[~ # ~] a [~ # ~] : accédez à Google Drive >> ouvrez le dossier >> regardez son URL dans la barre d'adresse de ton navigateur. Par exemple:

URL du dossier : https://drive.google.com/drive/folders/0B1iqp0kGpjWsNDg5NWFlZjEtN2IwZC00NmZiLWE3MjktYTE2ZjZJMJY2

ID de dossier :
0B1iqp0kGPjWsNDg5NWFlZjEtN2IwZC00NmZiLWE3MjktYTE2ZjZjNTZiMDY2

Avertissement avec les dossiers nécessitant une autorisation

Cette technique fonctionne mieux pour les dossiers avec un accès public. Les dossiers partagés uniquement avec certains comptes Google peuvent poser problème lorsque vous les incorporez de cette façon. Au moment de cette modification, le message "Vous avez besoin d'une autorisation" apparaît, avec des boutons vous permettant de "demander un accès" ou "Changer de compte" (ou éventuellement de vous connecter à un compte Google). Le Javascript dans ces boutons ne fonctionne pas correctement dans un IFRAME sous Chrome.

Pour en savoir plus, consultez la page https://productforums.google.com/forum/#!msg/drive/GpVgCobPL2Y/_Xt7sMc1WzoJ

72
Mori

Incorporation d'un répertoire Google Drive dans un IFRAME

Les dossiers de Google Drive peuvent être incorporés et affichés dans les vues list et grid (dans lesquelles vous ne pouvez que cliquer sur un fichier ou un dossier pour l'ouvrir dans un nouvel onglet). Pour ce faire, il vous suffit de remplacer FOLDER-ID par le vôtre dans:

vue liste

<iframe src="https://drive.google.com/embeddedfolderview?id=FOLDER-ID#list" style="width:100%; height:600px; border:0;"></iframe>

ou sans spécifier de mode, puisque le mode liste est le mode par défaut:

<iframe src="https://drive.google.com/embeddedfolderview?id=FOLDER-ID" style="width:100%; height:600px; border:0;"></iframe>

vue grille

<iframe src="https://drive.google.com/embeddedfolderview?id=FOLDER-ID#grid" style="width:100%; height:600px; border:0;"></iframe>

Obtenir votre identifiant de dossier

L'identifiant est le dièse (charabia alphanumérique) après folders/ dans l'URL du dossier. Vous pouvez voir l'URL dans la barre d'adresse de votre navigateur lorsque vous ouvrez le dossier Drive. Par exemple, dans:

https://drive.google.com/drive/folders/0B1iqp0kGPjWsNDg5NWFlZjEtN2IwZC00NmZiLWE3MjktYTE2ZjZjNTZiMDY2

L'identifiant du dossier est 0B1iqp0kGPjWsNDg5NWFlZjEtN2IwZC00NmZiLWE3MjktYTE2ZjZjNTZiMDY2.

Dossier avec domaine G Suite/Google Apps

Si votre dossier fait partie d'un domaine Google Apps, vous pouvez l'ajouter à l'URL pour atténuer les problèmes d'autorisation (voir plus loin dans les détails):

<iframe src="https://drive.google.com/a/MY.DOMAIN.COM/embeddedfolderview?id=FOLDER-ID#grid" style="width:100%; height:600px; border:0;"></iframe>

Il suffit de remplacer MY.DOMAIN.COM et FOLDER-ID par votre propre .

Avertissement avec les dossiers nécessitant une autorisation

Cette technique fonctionne mieux pour les dossiers avec un accès public. Les dossiers partagés uniquement avec certains comptes Google peuvent poser problème lorsque vous les incorporez de cette manière, en fonction des comptes Google actifs sur le navigateur de l'utilisateur:

  1. Si l'utilisateur ne s'est connecté à aucun compte Google, le message rien apparaît dans le cadre.
  2. Si l'utilisateur est connecté à un compte sans autorisation pour accéder au dossier, le cadre contiendra le message . Vous devez disposer d'une autorisation , avec certains boutons à Demander un accès ou Changer de compte , mais si vous cliquez sur ce dernier, le cadre vide en dehors.
  3. Si l'utilisateur se connecte à un compte sans les autorisations appropriées et ajoute ultérieurement le compte autorisé, lors du chargement du lecteur intégré, Google utilisera le premier compte actif et l'utilisateur verra . Vous devez disposer d'une autorisation , sauf si ...
  4. Si l'URL contient un domaine Google Suite et que l'utilisateur est connecté au compte de ce domaine, la vue intégrée fonctionnera même si l'utilisateur s'est connecté à un autre compte au préalable .

Les cadres vides sont dus au fait que Google interdit l’incorporation de sa page de connexion dans un IFRAME (probablement pour empêcher le vol de compte), via le X-Frame-Options en-tête, qui, s'il est défini sur SAMEORIGIN, fera en sorte que tout navigateur avisé refuse de charger la page si elle ne se trouve pas dans le même domaine (v.g. drive.google.com). Vous pouvez le voir dans la console du développeur de votre navigateur.

TL; DR

Pour obtenir une vue en liste ou en grille d'un dossier de lecteur (dans laquelle tout ce que vous pouvez faire est de cliquer sur un fichier ou un dossier pour l'ouvrir sur un nouvel onglet), utilisez:

<iframe src="https://drive.google.com/embeddedfolderview?id=FOLDER-ID#grid" style="width:100%; height:600px; border:0;"></iframe>

ou bien, pour un lecteur Google Suite/Apps:

<iframe src="https://drive.google.com/a/MY.DOMAIN.COM/embeddedfolderview?id=FOLDER-ID#grid" style="width:100%; height:600px; border:0;"></iframe>

Remplacez MY.DOMAIN.COM et FOLDER-ID par le vôtre; retirer #grid pour obtenir une liste de fichiers détaillée.

Pour les dossiers privés, demandez aux utilisateurs de se connecter au compte approprié avant de charger la page avec le dossier incorporé. Si le dossier est dans un domaine Google Apps, vous pouvez ajouter le domaine à l'URL. Sinon, ils doivent se connecter au compte autorisé avant tout autre.

(Cette réponse est une édition de Mori, mais elle a été rejetée car elle a changé son intention , en quelque sorte)

10
Chema

Pour les applications professionnelles/Gsuite ou ce qu'elles appellent, vous pouvez spécifier le domaine (problème avec 500 erreurs avec la réponse d'origine lorsque vous êtes connecté à plusieurs comptes Google).

<iframe 
  src="https://drive.google.com/a/YOUR_COMPANY_DOMAIN/embeddedfolderview?id=FOLDER-ID" 
  style="width:100%; height:600px; border:0;"
>
</iframe>
2
ElDog