قصة خلف التطبيق المحمي.
كان جعل Logto بديلاً مفتوحاً لـ Auth0 تجربة مثيرة. العالم مليء بالطرق للتحقق ممن هو متصل بالإنترنت، فلماذا نضيف أخرى؟ هذا هو السؤال الكبير الذي فكرنا فيه. أردنا شيئاً يمكن لأي مبرمج أن يلتقطه ويستخدمه دون الحاجة لتعلم مجموعة من SDKs أو كتابة سطور لا نهاية لها من الكود.
إذن، إليك الأخبار الكبيرة: لقد أنشأنا التطبيق المحمي. إنه بسيط جداً - فقط املأ نقطتين، وسينتهي الأمر، تطبيقك محمي بالمصادقة. بدون صداع. 🎉
بدأنا بتطوير التطبيق المحمي بعد أن لاحظنا مشكلة كبيرة أثناء صيانة SDKs الرسمية لدينا: على الرغم من توفير العديد من الـ SDKs ومشاريع العينات للمطورين، إلا أن عملية التكامل بقيت صعبة. كان على المطورين أن يتعلموا عن أنواع مختلفة من "الرموز" وكتابة كود إضافي لتكاملها. أدى هذا بنا إلى التساؤل: هل استخدام Logto أسهل حقاً من بناء نظام مصادقة من الصفر؟ للأسف، أدركنا أنه لم يكن بالسهولة التي كنا نأملها.
في Express SDK، ننصح المطورين بإضافة الوسطية كطبقة إضافية لأداء ثلاث مهام رئيسية: معالجة مسارات المصادقة، التحقق من حالة المصادقة، وإضافة معلومات المستخدم لطلب الكائن. بذلك، يمكن للمطورين الوصول إلى كائن مصادقة موثوق به من الطلب دون الحاجة لفهم تعقيدات "تكامل SDK." هذا جعلنا نفكر: هل يمكننا معالجة المهام الأولية للمطورين ونقودهم مباشرة إلى الخطوات اللاحقة؟
وفقًا لتقديمه الرسمي، Cloudflare Access ينشئ طبقة وصول آمنة لجميع تطبيقاتك المستضافة ذاتياً أو SaaS أو غير الويب دون الحاجة إلى تغييرات كود في التطبيقات نفسها.
كمزود CDN، يمكن لـ Cloudflare إضافة طبقة مصادقة إلى خدمة CDN الخاصة بها قبل إرسال الطلبات إلى خادم الأصل. ومع ذلك، فهي مصممة بشكل أساسي لمنتجات المؤسسات الداخلية، مع دعم الخطة المجانية لما يصل إلى 50 مستخدمًا فقط وتحدد الرسوم بناءً على عدد المستخدمين.
Cloudflare موثوق بها من قبل مجتمع واسع من المطورين، ويعمل التطبيق المحمي على Cloudflare Workers، مما يلغي القلق من إدارة خادم إضافي لتطبيقك. قمنا بتكامل Logto بطريقة مشابهة لما أظهرناه في عينة Express SDK، ولكن مع دعم إضافي للتخصيص. ثم نقوم بإرسال الطلب المحسن إلى خادم الأصل الخاص بك.
يحافظ التطبيق المحمي على حالة الجلسة ومعلومات المستخدم. إذا لم يتم توثيق المستخدم، فإن التطبيق المحمي يعيد توجيههم إلى صفحة تسجيل الدخول. بمجرد توثيقهم، يغلف التطبيق المحمي طلب المستخدم بمصادقة ومعلومات المستخدم، ثم يرسله إلى خادم الأصل.
يتم تصور هذه العملية في مخطط التدفق التالي:
%3btext-align:center%3b%7d%23mermaid-0 .edgeLabel p%7bbackground-color:rgba(232%2c232%2c232%2c 0.8)%3b%7d%23mermaid-0 .edgeLabel rect%7bopacity:0.5%3bbackground-color:rgba(232%2c232%2c232%2c 0.8)%3bfill:rgba(232%2c232%2c232%2c 0.8)%3b%7d%23mermaid-0 .labelBkg%7bbackground-color:rgba(232%2c 232%2c 232%2c 0.5)%3b%7d%23mermaid-0 .cluster rect%7bfill:%23ffffde%3bstroke:%23aaaa33%3bstroke-width:1px%3b%7d%23mermaid-0 .cluster text%7bfill:%23333%3b%7d%23mermaid-0 .cluster span%7bcolor:%23333%3b%7d%23mermaid-0 div.mermaidTooltip%7bposition:absolute%3btext-align:center%3bmax-width:200px%3bpadding:2px%3bfont-family:arial%2csans-serif%3bfont-size:12px%3bbackground:hsl(80%2c 100%25%2c 96.2745098039%25)%3bborder:1px solid %23aaaa33%3bborder-radius:2px%3bpointer-events:none%3bz-index:100%3b%7d%23mermaid-0 .flowchartTitleText%7btext-anchor:middle%3bfont-size:18px%3bfill:%23333%3b%7d%23mermaid-0 rect.text%7bfill:none%3bstroke-width:0%3b%7d%23mermaid-0 .icon-shape%2c%23mermaid-0 .image-shape%7bbackground-color:rgba(232%2c232%2c232%2c 0.8)%3btext-align:center%3b%7d%23mermaid-0 .icon-shape p%2c%23mermaid-0 .image-shape p%7bbackground-color:rgba(232%2c232%2c232%2c 0.8)%3bpadding:2px%3b%7d%23mermaid-0 .icon-shape rect%2c%23mermaid-0 .image-shape rect%7bopacity:0.5%3bbackground-color:rgba(232%2c232%2c232%2c 0.8)%3bfill:rgba(232%2c232%2c232%2c 0.8)%3b%7d%23mermaid-0 :root%7b--mermaid-font-family:arial%2csans-serif%3b%7d%3c/style%3e%3cg%3e%3cmarker orient='auto' markerHeight='8' markerWidth='8' markerUnits='userSpaceOnUse' refY='5' refX='5' viewBox='0 0 10 10' class='marker flowchart-v2' id='mermaid-0_flowchart-v2-pointEnd'%3e%3cpath style='stroke-width: 1%3b stroke-dasharray: 1%2c 0%3b' class='arrowMarkerPath' d='M 0 0 L 10 5 L 0 10 z'/%3e%3c/marker%3e%3cmarker orient='auto' markerHeight='8' markerWidth='8' markerUnits='userSpaceOnUse' refY='5' refX='4.5' viewBox='0 0 10 10' class='marker flowchart-v2' id='mermaid-0_flowchart-v2-pointStart'%3e%3cpath style='stroke-width: 1%3b stroke-dasharray: 1%2c 0%3b' class='arrowMarkerPath' d='M 0 5 L 10 10 L 10 0 z'/%3e%3c/marker%3e%3cmarker orient='auto' markerHeight='11' markerWidth='11' markerUnits='userSpaceOnUse' refY='5' refX='11' viewBox='0 0 10 10' class='marker flowchart-v2' id='mermaid-0_flowchart-v2-circleEnd'%3e%3ccircle style='stroke-width: 1%3b stroke-dasharray: 1%2c 0%3b' class='arrowMarkerPath' r='5' cy='5' cx='5'/%3e%3c/marker%3e%3cmarker orient='auto' markerHeight='11' markerWidth='11' markerUnits='userSpaceOnUse' refY='5' refX='-1' viewBox='0 0 10 10' class='marker flowchart-v2' id='mermaid-0_flowchart-v2-circleStart'%3e%3ccircle style='stroke-width: 1%3b stroke-dasharray: 1%2c 0%3b' class='arrowMarkerPath' r='5' cy='5' cx='5'/%3e%3c/marker%3e%3cmarker orient='auto' markerHeight='11' markerWidth='11' markerUnits='userSpaceOnUse' refY='5.2' refX='12' viewBox='0 0 11 11' class='marker cross flowchart-v2' id='mermaid-0_flowchart-v2-crossEnd'%3e%3cpath style='stroke-width: 2%3b stroke-dasharray: 1%2c 0%3b' class='arrowMarkerPath' d='M 1%2c1 l 9%2c9 M 10%2c1 l -9%2c9'/%3e%3c/marker%3e%3cmarker orient='auto' markerHeight='11' markerWidth='11' markerUnits='userSpaceOnUse' refY='5.2' refX='-1' viewBox='0 0 11 11' class='marker cross flowchart-v2' id='mermaid-0_flowchart-v2-crossStart'%3e%3cpath style='stroke-width: 2%3b stroke-dasharray: 1%2c 0%3b' class='arrowMarkerPath' d='M 1%2c1 l 9%2c9 M 10%2c1 l -9%2c9'/%3e%3c/marker%3e%3cg class='root'%3e%3cg class='clusters'/%3e%3cg class='edgePaths'%3e%3cpath marker-end='url(%23mermaid-0_flowchart-v2-pointEnd)' style='' class='edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link' id='L_A_B_0' d='M104.359%2c88L111.339%2c88C118.318%2c88%2c132.276%2c88%2c145.568%2c88C158.859%2c88%2c171.484%2c88%2c177.797%2c88L184.109%2c88'/%3e%3cpath marker-end='url(%23mermaid-0_flowchart-v2-pointEnd)' style='' class='edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link' id='L_B_Condition_1' d='M324.313%2c88L328.479%2c88C332.646%2c88%2c340.979%2c88%2c348.729%2c88.07C356.479%2c88.141%2c363.646%2c88.281%2c367.23%2c88.351L370.813%2c88.422'/%3e%3cpath marker-end='url(%23mermaid-0_flowchart-v2-pointEnd)' style='' class='edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link' id='L_Condition_Matched_2' d='M478.034%2c105.558L485.441%2c108.173C492.848%2c110.789%2c507.662%2c116.019%2c520.555%2c118.709C533.448%2c121.399%2c544.42%2c121.547%2c549.905%2c121.622L555.391%2c121.696'/%3e%3cpath marker-end='url(%23mermaid-0_flowchart-v2-pointEnd)' style='' class='edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link' id='L_Matched_C_3' d='M664.193%2c102.25L674.808%2c96.75C685.423%2c91.25%2c706.653%2c80.25%2c728.27%2c71.767C749.888%2c63.284%2c771.892%2c57.317%2c782.895%2c54.334L793.897%2c51.351'/%3e%3cpath marker-end='url(%23mermaid-0_flowchart-v2-pointEnd)' style='' class='edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link' id='L_Matched_D_4' d='M685.556%2c134.576L692.61%2c136.022C699.665%2c137.467%2c713.774%2c140.359%2c726.231%2c141.804C738.688%2c143.25%2c749.492%2c143.25%2c754.895%2c143.25L760.297%2c143.25'/%3e%3cpath marker-end='url(%23mermaid-0_flowchart-v2-pointEnd)' style='' class='edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link' id='L_Condition_C_5' d='M471.52%2c58.414L480.012%2c52.012C488.505%2c45.61%2c505.491%2c32.805%2c531.101%2c26.402C556.711%2c20%2c590.945%2c20%2c625.18%2c20C659.414%2c20%2c693.648%2c20%2c721.75%2c21.433C749.852%2c22.866%2c771.822%2c25.733%2c782.807%2c27.166L793.791%2c28.599'/%3e%3c/g%3e%3cg class='edgeLabels'%3e%3cg transform='translate(146.234375%2c 88)' class='edgeLabel'%3e%3cg transform='translate(-16.875%2c -12)' class='label'%3e%3cforeignObject height='24' width='33.75'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' class='labelBkg' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='edgeLabel'%3e%3cp%3e%d8%b7%d9%84%d8%a8%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg class='edgeLabel'%3e%3cg transform='translate(0%2c 0)' class='label'%3e%3cforeignObject height='0' width='0'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' class='labelBkg' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='edgeLabel'%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(522.4765625%2c 121.25)' class='edgeLabel'%3e%3cg transform='translate(-11.4140625%2c -12)' class='label'%3e%3cforeignObject height='24' width='22.828125'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' class='labelBkg' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='edgeLabel'%3e%3cp%3e%d9%86%d8%b9%d9%85%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(727.8828125%2c 69.25)' class='edgeLabel'%3e%3cg transform='translate(-11.4140625%2c -12)' class='label'%3e%3cforeignObject height='24' width='22.828125'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' class='labelBkg' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='edgeLabel'%3e%3cp%3e%d9%86%d8%b9%d9%85%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(727.8828125%2c 143.25)' class='edgeLabel'%3e%3cg transform='translate(-4.5625%2c -12)' class='label'%3e%3cforeignObject height='24' width='9.125'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' class='labelBkg' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='edgeLabel'%3e%3cp%3e%d9%84%d8%a7%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(625.1796875%2c 20)' class='edgeLabel'%3e%3cg transform='translate(-4.5625%2c -12)' class='label'%3e%3cforeignObject height='24' width='9.125'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' class='labelBkg' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='edgeLabel'%3e%3cp%3e%d9%84%d8%a7%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3c/g%3e%3cg class='nodes'%3e%3cg transform='translate(56.1796875%2c 88)' id='flowchart-A-0' class='node default'%3e%3crect height='78' width='96.359375' y='-39' x='-48.1796875' ry='5' rx='5' style='' class='basic label-container'/%3e%3cg transform='translate(-33.1796875%2c -24)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='48' width='66.359375'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='nodeLabel'%3e%3cp%3e%d8%b9%d9%85%d9%8a%d9%84%3cbr /%3e(%d8%a7%d9%84%d9%85%d8%aa%d8%b5%d9%81%d8%ad)%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(256.2109375%2c 88)' id='flowchart-B-1' class='node default'%3e%3crect height='78' width='136.203125' y='-39' x='-68.1015625' ry='5' rx='5' style='' class='basic label-container'/%3e%3cg transform='translate(-53.1015625%2c -24)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='48' width='106.203125'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='nodeLabel'%3e%3cp%3eLogto%3cbr /%3e%d8%a7%d9%84%d8%aa%d8%b7%d8%a8%d9%8a%d9%82 %d8%a7%d9%84%d9%85%d8%ad%d9%85%d9%8a%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(430.1875%2c 88)' id='flowchart-Condition-3' class='node default'%3e%3cpolygon transform='translate(-55.875%2c31.5)' class='label-container' points='15.75%2c0 96%2c0 111.75%2c-31.5 96%2c-63 15.75%2c-63 0%2c-31.5'/%3e%3cg transform='translate(-32.625%2c -24)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='48' width='65.25'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='nodeLabel'%3e%3cp%3e%d9%87%d9%84 %d8%aa%d8%b7%d8%a7%d8%a8%d9%82%3cbr /%3e%d8%a7%d9%84%d9%85%d8%b3%d8%a7%d8%b1 %d8%9f%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(625.1796875%2c 121.25)' id='flowchart-Matched-5' class='node default'%3e%3cpolygon transform='translate(-66.2890625%2c19.5)' class='label-container' points='9.75%2c0 122.828125%2c0 132.578125%2c-19.5 122.828125%2c-39 9.75%2c-39 0%2c-19.5'/%3e%3cg transform='translate(-49.0390625%2c -12)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='24' width='98.078125'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='nodeLabel'%3e%3cp%3e%d9%87%d9%84 %d8%aa%d9%85 %d8%a7%d9%84%d8%aa%d9%88%d8%ab%d9%8a%d9%82%d8%9f%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(850.515625%2c 36)' id='flowchart-C-7' class='node default'%3e%3crect height='54' width='105.515625' y='-27' x='-52.7578125' ry='5' rx='5' style='' class='basic label-container'/%3e%3cg transform='translate(-37.7578125%2c -12)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='24' width='75.515625'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='nodeLabel'%3e%3cp%3e%d8%ae%d8%a7%d8%af%d9%85 %d8%a7%d9%84%d8%a3%d8%b5%d9%84%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(850.515625%2c 143.25)' id='flowchart-D-9' class='node default'%3e%3crect height='54' width='172.4375' y='-27' x='-86.21875' ry='5' rx='5' style='' class='basic label-container'/%3e%3cg transform='translate(-71.21875%2c -12)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='24' width='142.4375'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='nodeLabel'%3e%3cp%3eLogto %d8%aa%d8%b3%d8%ac%d9%8a%d9%84 %d8%a7%d9%84%d8%af%d8%ae%d9%88%d9%84%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/svg%3e)
استخدام التطبيق المحمي سهل بشكل ملحوظ، ويحتاج فقط إلى قطعتين رئيسيتين من المعلومات: عنوان URL الأصل الذي يحتاج إلى المصادقة، واسم نطاق التطبيق، والذي يعمل كوكيل حماية المصادقة. يعمل هذا النطاق أيضًا كنطاق مفتوح لتطبيقك.
تحت السطح السهل الاستخدام، يستخدم التطبيق المحمي بروتوكول OpenID Connect القوي، وهو نفس التكنولوجيا التي تقف وراء تطبيقات Logto العادية الأخرى. هذا يضمن أن ينعم تطبيقك بالأمان والتوسع على مستوى الصناعة، مما يحمي بياناتك ومعلومات المستخدمين دون التأثير على الأداء.
علاوة على ذلك، يوفر التطبيق المحمي خيارات تخصيص واسعة. لديك الحرية لضبط قواعد المصادقة لمناطق مختلفة من موقعك وربط نطاق مخصص.
عند اعتماد التطبيق المحمي، يتم فتح باقي ميزات Logto القوية تلقائيًا لك: تجربة تسجيل دخول قابلة للتخصيص، المصادقة متعددة العوامل، SSO للمؤسسات، التحكم في الوصول المرتكز على الدور، المنظمات، والمزيد!
في هذه الصناعة سريعة التطور، نأمل أن يركز جميع البناة على أفكارهم المدهشة وأعمالهم، بدلاً من القتال مع التكاملات والعقبات التقنية. هذه هي مهمة فريقنا، وهذا ما صمم Logto من أجله. نحن ملتزمون بدعمك في جعل أفكارك العظيمة حقيقة، والتأكد من أنه يمكنك تخصيص وقتك ومواردك لما يهم حقاً - رؤيتك ومستخدميك.
التطبيق المحمي متاح الآن في Logto Cloud، ونحن متحمسون للإعلان عن أنه سيكون مفتوح المصدر قريبًا.
ندعوكم للانضمام إلينا في هذه الرحلة، لتبسيط الأمان حتى تتمكن من البقاء مركزاً على ما يهم حقاً.
ابق آمناً، وابق مسجلاً للدخول! 💻🔐