# Activer une API Google et sa facturation éventuelle

<div id="bkmrk-lors-du-development-"><span style="color: rgb(102, 102, 102);">Lors du développement de ton projet, certains services peuvent nécessiter l'activation d'une Clé API de Google pour fonctionner pleinement.  
  
</span>**Plusieurs étapes sont nécessaires à cela :** </div>1. <span style="color: rgb(102, 102, 102);">Créer un profil Google Developer</span>
    - *et y associer un projet*
2. <span style="color: rgb(102, 102, 102);">Activer les clés API</span>
    - *et les restreindre aux sites que tu possèdes (facultatif)*
3. <span style="color: rgb(102, 102, 102);">Ajouter un mode de facturation (</span>**obligatoire**<span style="color: rgb(102, 102, 102);">)</span>
    - *Google [offre un certain nombre d'appels aux API](https://mapsplatform.google.com/intl/fr/pricing/), tu ne sera pas forcément facturé.*

<div id="bkmrk-voici-un-tuto-comple"><span style="color: rgb(102, 102, 102);">Voici un tuto complet pour t'en sortir 🚀</span>  
<figure class="attachment attachment--content attachment--horizontal-rule">---

</figure></div>##  💻 Créer un projet et activer les APIs

<div id="bkmrk-">  
</div><p class="callout info">**Pré-requis** : Tu dois disposer d'un compte Google. Toute adresse en "gmail.com" ou autre que tu aura lié à un compte google pourra faire l'affaire !</p>

<div id="bkmrk--0"></div>#### **1. Te connecter au compte Cloud Platform:**  


<div id="bkmrk-va-donc-sur-la-page-">Va donc sur la page [Google Cloud Platform](https://cloud.google.com/) </div>- Cliques sur "Connexion" en haut à droite.
- Entres ton adresse mail et le mot de passe associé
- Rends toi sur "Console" en haut à droite de l'écran.

<div id="bkmrk-une-fois-les-conditi">Une fois les conditions d'utilisation acceptées, on va pouvoir créer un projet</div>####   
**2. Créer un projet**

En haut, à gauche de la console, tu peux essayer de "**Sélectionner un projet**" (*Mais tu n'en à pas pour le moment 😅*)

<div id="bkmrk--1"></div><div id="bkmrk--2">[![image(45).png](https://doc.yeswedev.bzh/uploads/images/gallery/2023-03/scaled-1680-/mgUTAscG90wc1m8t-image45.png)](https://doc.yeswedev.bzh/uploads/images/gallery/2023-03/mgUTAscG90wc1m8t-image45.png)</div><div id="bkmrk--3"></div><div id="bkmrk-cliques-sur-%22nouveau">- Cliques sur "**Nouveau projet**" en haut à droite de la modale.
- Nommes ton projet (*par exemple "Site Vitrine" ou "e-boutique"*)
- A moins que tu ne sois à l'aise avec, pas besoin de choisir de "**Zone**"
- Clique sur "**Créer**"

</div><p class="callout success">Quelques secondes plus tard, ton projet est bien créé et sélectionné en haut de l'écran.</p>

<div id="bkmrk--4"></div><div id="bkmrk--5">[![image(46).png](https://doc.yeswedev.bzh/uploads/images/gallery/2023-03/scaled-1680-/Y4jPTT0kLQD9byOC-image46.png)](https://doc.yeswedev.bzh/uploads/images/gallery/2023-03/Y4jPTT0kLQD9byOC-image46.png)</div><div id="bkmrk--6"></div><div id="bkmrk--7"></div><div id="bkmrk--8"></div>#### **3. Activer les APIs voulues.**   


<div id="bkmrk-rends-toi-dans-%22api-"><div>Rends toi dans "**API et services**" &gt; "**Bibliothèque**" puis cherche l'API dont tu as besoin. (*C'est dans le menu Burger, en haut à gauche*)</div></div><div id="bkmrk--9"></div><div id="bkmrk--10">[![bibliotheque_google_api.png](https://doc.yeswedev.bzh/uploads/images/gallery/2023-03/scaled-1680-/XoOXQXddl12DoA8H-bibliotheque-google-api.png)](https://doc.yeswedev.bzh/uploads/images/gallery/2023-03/XoOXQXddl12DoA8H-bibliotheque-google-api.png)</div><div id="bkmrk--11"></div><div id="bkmrk--12"></div><div id="bkmrk--13"></div><div id="bkmrk-tu-as-trouv%C3%A9-ton-api">Tu as trouvé ton API, tu n'as qu'à cliquer sur "**Activer**" si elle ne l'est pas déjà.</div><div id="bkmrk--14"></div><div id="bkmrk--15"></div><div id="bkmrk--16"></div>[![image.png](https://doc.yeswedev.bzh/uploads/images/gallery/2023-05/scaled-1680-/tu3y4DHz8bFVk5DD-image.png)](https://doc.yeswedev.bzh/uploads/images/gallery/2023-05/tu3y4DHz8bFVk5DD-image.png)

<p class="callout success">La page se relance et tu sera mené vers l'ajout d'un compte de facturation (voir le détail plus bas si tu es perdu).</p>

<div id="bkmrk--18"></div><div id="bkmrk--19"></div><div id="bkmrk--20"></div>#### **4. Créer ta clé API**

<div id="bkmrk--21"></div><div id="bkmrk-maintenant%2C-rends-to"><div><div>Maintenant, rends toi dans "**API et Services**" &gt; "**Identifiants**" (*C'est toujours dans le menu Burger, en haut à gauche*)  
  
Pour créer une clé API, il te suffit de cliquer sur "**+ Create Credentials**", en haut de l'écran.  
Choisis "**Clé API**" et elle apparaîtra dans la liste.</div></div></div><div id="bkmrk--22">  
</div>#### **5. Sécuriser ta clé API (<span style="background-color: rgb(251, 238, 184);">INDISPENSABLE</span>)**

<p class="callout danger">Sans sécurisation, ta clé API pourrait être utilisée par d'autres applications, d'autres sites ou d'autres personnes. **YesWeDev ne saurait être responsable de cette situation.**</p>

<div id="bkmrk-%C2%A0je-te-conseille-de-"><div>   
Je te conseille de réaliser plusieurs actions à ce stade :</div>- Cliquer sur "Clé API 1"
- Renommer la clé en fonction de son utilisation (*Exemple "API monsite.fr"*)
- Restreindre l'utilisation de la clé par "Adresses IP" 
    - Ajoute l'adresse IP de ton site/ ton app (Tu peux la connaitre avec [https://www.whatsmydns.net/](https://www.whatsmydns.net/))
    - C'est dans le bloc "**Restrictions liées aux applications**"
- Restreindre aux seules API utilisées sur ton site 
    - Rien ne sert d'en mettre plus ! c'est un risque d'utilisation supplémentaire.
    - C'est dans le bloc "**Restrictions relatives aux API**"

</div>**⚠ Et n'oublie pas d'enregistrer avant de partir !**

#### **6. Récupérer ta clé API**

<div id="bkmrk-sur-la-ligne-ainsi-c"><div><div>  
</div><div id="bkmrk-sur-la-ligne-ainsi-c-0"><div><div><div id="bkmrk-sur-la-ligne-ainsi-c-1"><div>Sur la ligne ainsi créée, tu peux afficher la clé et la copier pour la communiquer aux développeurs.</div><div>  
</div></div><div id="bkmrk--23">[![image(48).png](https://doc.yeswedev.bzh/uploads/images/gallery/2023-03/scaled-1680-/a1AS1oMhfypkt7Fm-image48.png)](https://doc.yeswedev.bzh/uploads/images/gallery/2023-03/a1AS1oMhfypkt7Fm-image48.png)</div></div></div></div>  
</div></div><div id="bkmrk-%C2%A0-%F0%9F%92%B3-param%C3%A9trer-un-mo">---

<div><span style="color: rgb(34, 34, 34); font-size: 2.8275em; font-weight: 400;">💳 Paramétrer un mode de paiement</span>  
</div></div><div id="bkmrk-google-impose-l%27ajou"><div><span style="color: rgb(102, 102, 102);">  
Google impose l'ajout d'un mode de paiement pour l'utilisation de ses API, tu ne pourra donc pas contourner la règle au risque d'avoir un affichage en partie bloqué (</span>*un exemple ci-dessous avec les Maps*<span style="color: rgb(102, 102, 102);">)</span></div><div>  
</div></div><div id="bkmrk--25"></div><div id="bkmrk--26"><span style="color: rgb(102, 102, 102);">[![image(49).png](https://doc.yeswedev.bzh/uploads/images/gallery/2023-03/scaled-1680-/vFQ9wJgQXRECNSvP-image49.png)](https://doc.yeswedev.bzh/uploads/images/gallery/2023-03/vFQ9wJgQXRECNSvP-image49.png)</span></div><div id="bkmrk--27"></div><div id="bkmrk--28"></div>#### **1**. **Les conditions de facturation**

<div id="bkmrk-pour-les-infos-de-fa"><div>  
</div><div>Pour simuler la facturation sur ton projet, c'est par ici : https://mapsplatform.google.com/pricing/?hl=fr#pricing-grid</div><div>  
</div><div>**Les infos à retenir :**</div>- Google Offre 200 $ de crédit mensuel
- **Si tu ne dépasse pas** ce crédit mensuel : **Aucune facturation** n'aura lieue 
    - Pour te donner une idée, pour Google Maps JS, cela représente environ 28 000 cartes affichées (*une visite sur une page ou tu as mis 2 cartes = 2 affichages*).
- **Si tu dépasses**, cela **dépendra du nombre d'affichage** de carte (*voir détail du pricing Google*)

</div>#### **2. Ajouter un compte de facturation**

<div id="bkmrk-v%C3%A9rifie-que-ton-proj"><div>Vérifie que ton projet sélectionné est le bon (au cas ou tu en ai plusieurs) et retrouve l'entrée "facturation" dans le menu.</div><div>  
</div></div><div id="bkmrk--29"></div><div id="bkmrk--30">[![image(50).png](https://doc.yeswedev.bzh/uploads/images/gallery/2023-03/scaled-1680-/yRYJDkTWz3WoVqld-image50.png)](https://doc.yeswedev.bzh/uploads/images/gallery/2023-03/yRYJDkTWz3WoVqld-image50.png)</div><div id="bkmrk--31"></div><div id="bkmrk--32"></div><p class="callout info">Laisses-toi guider par le service de Google pour associer un mode de paiement à ton projet.</p>

<figure class="attachment attachment--content attachment--horizontal-rule" id="bkmrk--33"></figure><div id="bkmrk--34"><div><div><figure class="attachment attachment--content attachment--horizontal-rule">---

</figure></div></div></div>#### Et c'est terminé ! Au tour de Yes We Dev d'ajouter la clé API au code de ton site pour que l'affichage soit correct.

[![giphy(3).gif](https://doc.yeswedev.bzh/uploads/images/gallery/2023-03/DEScyguBpKxjmbOO-giphy3.gif)](https://doc.yeswedev.bzh/uploads/images/gallery/2023-03/DEScyguBpKxjmbOO-giphy3.gif)