آموزش Cors در گوگل AMP

4 سال پیش

امتیاز دهید post

آموزش Cors در گوگل AMP

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش Cors در گوگل AMP خواهیم پرداخت.

در این فصل سعی خواهیم کرد CORS را در AMP درک کنیم. قبل از اینکه بیشتر به جزئیات بپردازیم ، اجازه دهید ما اصول CORS و نحوه مفید بودن آن را درک کنیم.

CORS چیست؟

CORS مخفف Cross Origin Resource Sharing است. CORS فرایندی است که به داده های سرآیند HTTP اضافی نیاز دارد تا به مرورگر اطلاع دهد که آیا درخواستی که از طریق صفحه وب موجود در say xyz.com به آدرس اینترنتی ارسال شده است ، اجازه دسترسی به داده ها از آدرس اینترنتی درخواستی را دارد. ما درخواستهای http زیادی از صفحه وب ارائه می دهیم و برای این منظور باید CORS در اختیار داشته باشیم تا داده های مورد نیاز را بدست آوریم.

وقتی از سرور متفاوتی از میزبان درخواست http می کنیم ، آن را به عنوان درخواست cross origin می نامیم که به این معنی است که دامنه ، پروتکل و درگاه با مبدأ میزبان متفاوت است. در چنین شرایطی، برای دسترسی به داده ها باید از آدرس اینترنتی درخواست شده مجوز داده شود. به این معنی است که درخواست GET / PUT / POST / DELETE انجام شده است.

این داده های اضافی در هدر مرورگر برای تماس درخواست درخواست http موجود است. این مرحله اجازه اساساً به دلایل امنیتی لازم است تا هیچ صفحه وب بدون اجازه لازم نتواند از دامنه دیگری داده ایجاد یا دریافت کند.

هدر مرورگر باید دارای جزئیاتی مانند Access-Control-Allow-Origin باشد که می تواند مقادیری را داشته باشد که در زیر نشان داده شده است –

Access-Control-Allow-Origin : *

1	Access-Control-Allow-Origin : *

داشتن مقدار * برای عنوان URL درخواست به معنای این است که به مرورگرها می گوید اجازه دسترسی به منبع را برای درخواست داده ها از هر مبدا فراهم می کنند.

Access-Control-Allow-Origin: https://www.example.com

1	Access-Control-Allow-Origin: https://www.example.com

داشتن مقادیر فوق به مرورگر می گوید که درخواستی که از صفحه وب www.example.com ارائه شده است فقط مجاز به دریافت داده برای آدرس اینترنتی درخواستی است.

پیکربندی سرور برای CORS باید با در نظر گرفتن نحوه استفاده از داده های به اشتراک گذاشته شده انجام شود. بسته به این ، سرصفحه های مورد نیاز باید در سمت سرور تنظیم شوند.

حالا که دانستیم CORS چیست، بگذارید یک قدم دیگر جلو برویم. در مورد amp، ما مولفه هایی مانند amp-form ، amp-list داریم که از نقاط انتهایی http برای بارگذاری پویا داده ها استفاده می کند.

در مورد صفحات amp، حتی اگر درخواست http از همان مبدا ساخته شده باشد، ما باید تنظیمات CORS را در محل خود داشته باشیم. سوالاتی در اینجا بوجود می آیند – چرا ما باید CORS را فعال کنیم حتی اگر درخواست و پاسخ از همان منشا گرفته شود. از نظر فنی ما در چنین شرایطی نیازی به CORS نداریم زیرا ما درخواست داده و نمایش داده برای همان دامنه ، مبدا و غیره را داریم.

Amp از ویژگی هایی به نام caching برخوردار است که برای دستیابی سریعتر داده ها به کاربری که به صفحه وارد می شود اضافه می شود. درصورتی که کاربر قبلاً از صفحه بازدید کرده باشد ، داده ها در google cdn ذخیره می شوند ، کاربر بعدی داده های ارائه شده از حافظه پنهان را دریافت می کند.

داده ها در پایان amp ذخیره می شوند که اکنون دامنه دیگری دارد. وقتی کاربر برای به دست آوردن داده های جدید روی هر دکمه ای کلیک می کند، آدرس URL cache amp با دامنه صفحه وب مقایسه می شود تا داده های جدید را دریافت کند. در اینجا اکنون اگر CORS فعال نباشد زیرا با آدرس اینترنتی cached amp و دامنه صفحه وب سروکار دارد درخواست معتبر نخواهد بود و برای مجوز CORS ناموفق خواهد بود. به همین دلیل است که ما نیاز به فعال کردن CORS حتی برای همان منبع در مورد صفحه های آمپر داریم.

نمونه ای از کار با فرمهایی که CORS فعال است در اینجا نشان داده شده است –

&lt;!doctype html&gt;
&lt;html amp lang = "en"&gt;
   &lt;head&gt;
      &lt;meta charset = "utf-8"&gt;
      &lt;script async src = "https://cdn.ampproject.org/v0.js"&gt;
      &lt;/script&gt;
      &lt;title&gt;Google AMP - Form&lt;/title&gt;
      &lt;link rel = "canonical" href = "ampform.html"&gt;
      &lt;meta name = "viewport" content = "width = device-width,
      minimum-scale = 1,initial-scale = 1"&gt;
      
      &lt;style amp-boilerplate&gt;
         body{
            -webkit-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;animation:
            -amp-start 8s steps(1,end) 0s 1 normal both
         }
         @-webkit-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}
      &lt;/style&gt;
      &lt;noscript&gt;
         &lt;style amp-boilerplate&gt;
            body{
               -webkit-animation:none;
               -moz-animation:none;
               -ms-animation:none;
               animation:none}
         &lt;/style&gt;
      &lt;/noscript&gt;
      &lt;script async custom-element = "amp-form" 
         src = "https://cdn.ampproject.org/v0/amp-form-0.1.js"&gt;
      &lt;/script&gt;
      &lt;script async custom-template = "amp-mustache" 
         src = "https://cdn.ampproject.org/v0/amp-mustache-0.2.js"&gt;
      &lt;/script&gt;
      &lt;style amp-custom&gt;
         form.amp-form-submit-success [submit-success],
         form.amp-form-submit-error [submit-error]{
            margin-top: 16px;
         }
         form.amp-form-submit-success [submit-success] {
            color: white;
            background-color:gray;
         }
         form.amp-form-submit-error [submit-error] {
            color: red;
         }
         form.amp-form-submit-success.hide-inputs &gt; input {
            display: none;
         }
      &lt;/style&gt;
   &lt;/head&gt;
   &lt;body&gt;
      &lt;h3&gt;Google AMP - Form&lt;/h3&gt;
      &lt;form 
         method = "post" 
         class = "p2" 
         action-xhr = "submitform.php" 
         target = "_top"&gt;
            &lt;p&gt;AMP - Form Example&lt;/p&gt;
            &lt;div&gt;
               &lt;input 
                  type = "text" 
                  name = "name" 
                  placeholder = "Enter Name" required&gt;
               &lt;br/&gt;
               &lt;br/&gt;
               &lt;input 
                  type = "email" 
                  name = "email" 
                  placeholder = "Enter Email" 
                  required&gt;
               &lt;br/&gt;
               &lt;br/&gt;
            &lt;/div&gt;
            &lt;input type = "submit" value = "Submit"&gt;
            &lt;div submit-success&gt;
               &lt;template type = "amp-mustache"&gt;
                  Form Submitted! Thanks {{name}}.
               &lt;/template&gt;
            &lt;/div&gt;
            &lt;div submit-error&gt;
               &lt;template type = "amp-mustache"&gt;
                  Error! {{name}}, please try again.
               &lt;/template&gt;
            &lt;/div&gt;
      &lt;/form&gt;
   &lt;/body&gt;
&lt;/html&gt;

<!doctype html>

<head>

</script>

<title>Google AMP - Form</title>

minimum-scale = 1,initial-scale = 1">

body{

-webkit-animation:

-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:

-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:

-amp-start 8s steps(1,end) 0s 1 normal both;animation:

-amp-start 8s steps(1,end) 0s 1 normal both

}

@-webkit-keyframes

-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes

-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes

-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes

-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes

-amp-start{from{visibility:hidden}to{visibility:visible}}

</style>

body{

-webkit-animation:none;

-moz-animation:none;

-ms-animation:none;

animation:none}

</style>

</noscript>

src = "https://cdn.ampproject.org/v0/amp-form-0.1.js">

</script>

src = "https://cdn.ampproject.org/v0/amp-mustache-0.2.js">

</script>

form.amp-form-submit-success [submit-success],

form.amp-form-submit-error [submit-error]{

margin-top: 16px;

}

form.amp-form-submit-success [submit-success] {

color: white;

background-color:gray;

}

form.amp-form-submit-error [submit-error] {

color: red;

}

form.amp-form-submit-success.hide-inputs > input {

display: none;

}

</style>

</head>

<body>

<h3>Google AMP - Form</h3>

<form

method = "post"

class = "p2"

action-xhr = "submitform.php"

target = "_top">

<p>AMP - Form Example</p>

<div>

<input

type = "text"

name = "name"

placeholder = "Enter Name" required>

<br/>

<input

type = "email"

name = "email"

placeholder = "Enter Email"

required>

<br/>

</div>

Form Submitted! Thanks {{name}}.

</template>

</div>

Error! {{name}}, please try again.

</template>

</div>

</form>

</body>

</html>

submitform.php

&lt;?php
   if(!empty($_POST)){
      $domain_url = (isset($_SERVER['HTTPS']) ? "https" : "http") . 
         "://$_SERVER[HTTP_HOST]";
      header("Content-type: application/json");
      header("AMP-Access-Control-Allow-Source-Origin: " . $domain_url);
      header("Access-Control-Expose-Headers: 
         AMP-Access-Control-Allow-Source-Origin");
      $myJSON = json_encode($_POST);
      echo $myJSON;
   }
?&gt;

<?php

if(!empty($_POST)){

$domain_url = (isset($_SERVER['HTTPS']) ? "https" : "http") .

"://$_SERVER[HTTP_HOST]";

header("Content-type: application/json");

header("AMP-Access-Control-Allow-Source-Origin: " . $domain_url);

header("Access-Control-Expose-Headers:

AMP-Access-Control-Allow-Source-Origin");

$myJSON = json_encode($_POST);

echo $myJSON;

}

خروجی

جزئیات عناوین پاسخ به submitform.php اضافه شده است –

Response Submitform
برای کارکرد فرم ، باید عناوینی مانند دسترسی کنترل کنترل-افشا-سربرگ با مقدار AMP-Access-Control-Allow-Source-Origin و amp-access-control-allow-source-origin – http: // localhost اضافه کنیم : 8080.

در اینجا ما از فایل php استفاده می کنیم و apache سرور مورد استفاده است. در فایل php ، عناوین مورد نیاز را مانند تصویر زیر اضافه کرده ایم –

&lt;?php
   if(!empty($_POST)){
      $domain_url = (isset($_SERVER['HTTPS']) ? "https" : "http") .
         "://$_SERVER[HTTP_HOST]";
      header("Content-type: application/json");
      header("AMP-Access-Control-Allow-Source-Origin: " . $domain_url);
      header("Access-Control-Expose-Headers: 
         AMP-Access-Control-Allow-Source-Origin");
      $myJSON = json_encode($_POST);
      echo $myJSON;
   }
?&gt;

<?php

if(!empty($_POST)){

$domain_url = (isset($_SERVER['HTTPS']) ? "https" : "http") .

"://$_SERVER[HTTP_HOST]";

header("Content-type: application/json");

header("AMP-Access-Control-Allow-Source-Origin: " . $domain_url);

header("Access-Control-Expose-Headers:

AMP-Access-Control-Allow-Source-Origin");

$myJSON = json_encode($_POST);

echo $myJSON;

}

وقتی عناوین مورد نیاز اضافه می شوند ، منشا http: // localhost: 8080 اجازه تعامل و بازگرداندن داده ها را خواهد داشت.

منبع.

لیست جلسات قبل آموزش گوگل AMP

امتیاز دهید post

برچسب ها : آموزش برنامه نویسی موبایل آموزش گوگل AMP

نویسنده مطلب saber

آموزش Cors در گوگل AMP

آموزش Cors در گوگل AMP

CORS چیست؟

خروجی

لیست جلسات قبل آموزش گوگل AMP

دیدگاه شما

بدون دیدگاه

آموزش Cors در گوگل AMP

CORS چیست؟

خروجی

لیست جلسات قبل آموزش گوگل AMP

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه