使用MongoDB Atlas的GraphQL API，在浏览器上执行查询

2 年 ago

新, 韵

3 minutes

首先

我已经为在MongoDB Atlas上配置的GraphQL应用程序添加了设置，以使其可以从浏览器中进行搜索。

要让外部访问MongoDB Atlas上的GraphQL应用程序，需要进行访问权限和认证设置。特别是，如果要直接从浏览器发送查询，则需要使用Bearer认证以避免CORS错误。

我們參考了以下關於MongoDB Atlas的Bearer認證資料。

设置访问权限

由于默认情况下不允许访问外部数据，因此对于公开的应用程序数据，至少需要允许读取。

設定認證

从左侧面板选择身份验证。在右侧会显示身份验证提供者的界面，然后点击API密钥的编辑按钮。

为了启用Provider Enabled并保存设置，请点击“保存草稿”按钮。在此时，即使点击“创建API Key”，API Key也不会被创建。

请从浏览器中进行操作验证。

利用Bearer認证的方法，从浏览器向MongoDB Atlas发送请求。执行以下两个步骤：

取得したアクセストークンをヘッダに指定してクエリを送信

取得的访问令牌有效期为30分钟。

获取访问令牌
需要在访问令牌获取的URL中设置应用程序ID。可以从MongoDB Atlas应用程序的设置页面获取应用程序ID。

【获取访问令牌的URL格式】

https://realm.mongodb.com/api/client/v2.0/app/<APPID>/auth/providers/api-key/login

以JSON格式发送请求。对于密钥，请指定之前在认证设置中记下的API密钥。
【发送位置】

	fetch('https://realm.mongodb.com/api/client/v2.0/app/webcamql-qrkjj/auth/providers/api-key/login', {
  		method: 'POST',
  		headers: {
    		'Content-Type': 'application/json'
  		},
  		body: JSON.stringify({
    		"key": "mfRX9eCxzDFg91YVtcQ75ZIhgnZItcG49Gg8lndtQO5kOBq0Ok9tqj2qLvflljp7"
 		})
	})
	.then(response => response.json())
	.then(data =>{
		authToken = data.access_token; 
		console.log(data);
	}).catch(error => console.error(error));

当发送请求后，会收到以下类型的结果，将access_token保存在变量中。
【接收数据示例】

{
    "access_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJiYWFzX2RldmljZV9pZCI6IjAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMCIsImJhYXNfZG9tYWluX2lkIjoiNjQ1NjRkNjc3ZmZmMzU3YjljNjc1ZWEyIiwiZXhwIjoxNjgzNDI5ODAyLCJpYXQiOjE2ODM0MjgwMDEsImlzcyI6IjY0NTcxMmExODA1NmMwM2I5YmI0ZmIyMyIsInN0aXRjaF9kZXZJZCI6IjAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMCIsInN0aXRjaF9kb21haW5JZCI6IjY0NTY0ZDY3N2ZmZjM1N2I5YzY3NWVhMiIsInN1YiI6IjY0NTZmODgwOWUwOTJjYmY1ZjM5YTM5ZCIsInR5cCI6ImFjY2VzcyJ9.GRafD4p7NTgPawQTdKEpDUXIW5EkZ7pw9wRMaLglJos",
    "refresh_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJiYWFzX2RhdGEiOm51bGwsImJhYXNfZGV2aWNlX2lkIjoiMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwIiwiYmFhc19kb21haW5faWQiOiI2NDU2NGQ2NzdmZmYzNTdiOWM2NzVlYTIiLCJiYWFzX2lkIjoiNjQ1NzEyYTE4MDU2YzAzYjliYjRmYjIzIiwiYmFhc19pZGVudGl0eSI6eyJpZCI6IjY0NTZmODgxOWUwOTJjYmY1ZjM5YTNhMiIsInByb3ZpZGVyX3R5cGUiOiJhcGkta2V5IiwicHJvdmlkZXJfaWQiOiI2NDU2NGQ2NzdmZmYzNTdiOWM2NzVlOWUifSwiZXhwIjoxNjg4NjEyMDAxLCJpYXQiOjE2ODM0MjgwMDEsInN0aXRjaF9kYXRhIjpudWxsLCJzdGl0Y2hfZGV2SWQiOiIwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAiLCJzdGl0Y2hfZG9tYWluSWQiOiI2NDU2NGQ2NzdmZmYzNTdiOWM2NzVlYTIiLCJzdGl0Y2hfaWQiOiI2NDU3MTJhMTgwNTZjMDNiOWJiNGZiMjMiLCJzdGl0Y2hfaWRlbnQiOnsiaWQiOiI2NDU2Zjg4MTllMDkyY2JmNWYzOWEzYTIiLCJwcm92aWRlcl90eXBlIjoiYXBpLWtleSIsInByb3ZpZGVyX2lkIjoiNjQ1NjRkNjc3ZmZmMzU3YjljNjc1ZTllIn0sInN1YiI6IjY0NTZmODgwOWUwOTJjYmY1ZjM5YTM5ZCIsInR5cCI6InJlZnJlc2gifQ.ZPSxBnFpyxDy4smwEfRK_pKOzasP8m1NaH-QbBdsStI",
    "user_id": "6456f8809e092cbf5f39a39d",
    "device_id": "000000000000000000000000"
}

2. 发送查询
将获取到的访问令牌指定到头部，然后发送查询。发送的目标端点可从Mongodb Atlas的应用程序设置页面中获取。

使用Bearer <访问令牌> 将Authorization头设置为请求并发送到端点。以json格式接收结果。

【查询发送部分】 ̄ry

	fetch('https://realm.mongodb.com/api/client/v2.0/app/webcamql-qrkjj/graphql', {
  		method: 'POST',
  		headers: {
			'Authorization': 'Bearer ' + authToken  ,
    		'Content-Type': 'application/json'
  		},
  		body: JSON.stringify({
    		query: queryMsg
  		})
	})
	.then(response => response.json())
	.then(data =>{ 
		console.log(data);
		document.getElementById("result").innerHTML=JSON.stringify(data);
	})
	.catch(error => console.error(error));

请参考查询的内容。

	let queryMsg = `query {
  		webcams(query:{id_lte:"1059100000"}
  		,limit:5
    	,sortBy:ID_ASC) {
			id
			status
			title
    		location{
     		 	latitude
      			longitude
    		}
  		}
	}`

【GraphQL确认用代码全文】

<html>
<body onload="getAuthenticate()">
<button type="button" onclick="getWebCamList();">TEST</button>
<div id="result"></div>
<script>
var authToken = "";
function getAuthenticate(){

	fetch('https://realm.mongodb.com/api/client/v2.0/app/webcamql-qrkjj/auth/providers/api-key/login', {
  		method: 'POST',
  		headers: {
    		'Content-Type': 'application/json'
  		},
  		body: JSON.stringify({
    		"key": "mfRX9eCxzDFg91YVtcQ75ZIhgnZItcG49Gg8lndtQO5kOBq0Ok9tqj2qLvflljp7"
 		})
	})
	.then(response => response.json())
	.then(data =>{
		authToken = data.access_token; 
		console.log(data);
	}).catch(error => console.error(error));
}

function getWebCamList(){
	let queryMsg = `query {
  		webcams(query:{id_lte:"1059100000"}
  		,limit:5
    	,sortBy:ID_ASC) {
			id
			status
			title
    		location{
     		 	latitude
      			longitude
    		}
  		}
	}`;

	fetch('https://realm.mongodb.com/api/client/v2.0/app/webcamql-qrkjj/graphql', {
  		method: 'POST',
  		headers: {
			'Authorization': 'Bearer ' + authToken  ,
    		'Content-Type': 'application/json'
  		},
  		body: JSON.stringify({
    		query: queryMsg
  		})
	})
	.then(response => response.json())
	.then(data =>{ 
		console.log(data);
		document.getElementById("result").innerHTML=JSON.stringify(data);
	})
	.catch(error => console.error(error));
}
</script>
<body>
</html>

最后

MongoDB Atlas提供了从界面上进行设置的功能，可以使用各种不同的功能，但由于可用功能太多，要完全掌握使用方法可能会有些困难。