Start building for free - no credit card until you're launch-ready!

Component laden...

Laden

Meer onderdelen

Deel van

Sociale aanmeldingsknoppen

Dribbble Sociale Login

Webflow Auth Knoppen Component

Bedankt! Ik zal
dit project zo snel mogelijk bijwerken.

Oeps! Er ging iets mis bij het verzenden van het formulier.

Hoe Google-verificatie inschakelen

Facebook-verificatie inschakelen

Spotify verificatie inschakelen

Hoe Dribbble verificatie in te schakelen

Hoe de Github-authenticatie in te schakelen

Hoe LinkedIn verificatie inschakelen

Hoe wachtwoordloze aanmeldingen inschakelen

Hoe wachtwoordvalidatie configureren

Hoe wachtwoord tonen/verbergen

Werken met profielafbeeldingen

Hoe een wachtwoord vergeten-flow toevoegen

Werken met selectievakjes

Hoe prijstabellen configureren

Over het Stripe klantenportaal

{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"266c221d-e014-0dc0-15a6-81e9ad2e0260","type":"Link","tag":"a","classes":["b78c2541-8473-a75b-a297-efaf65e93385","e63577dc-f58b-32d9-fdca-44c357fe3cea"],"children":["266c221d-e014-0dc0-15a6-81e9ad2e0261"],"data":{"search":{"exclude":false},"xattr":[{"name":"data-ms-auth-provider","value":"dribbble"}],"block":"inline","attr":{"id":""},"visibility":{"conditions":[]},"button":false,"link":{"mode":"external","url":"#"}}},{"_id":"266c221d-e014-0dc0-15a6-81e9ad2e0261","type":"Block","tag":"div","classes":["b78c2541-8473-a75b-a297-efaf65e93386"],"children":["266c221d-e014-0dc0-15a6-81e9ad2e0262","266c221d-e014-0dc0-15a6-81e9ad2e0263","266c221d-e014-0dc0-15a6-81e9ad2e0264"],"data":{"tag":"div","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"text":false}},{"_id":"266c221d-e014-0dc0-15a6-81e9ad2e0262","type":"Image","tag":"img","classes":["3e7f4474-bee1-03cf-9e0e-915f224e02a6"],"children":[],"data":{"attr":{"src":"https://cdn.prod.website-files.com/632c941ea9199f8985f3fd52/632ca01585cf323fdd614a81_dribbble-svgrepo-com.svg","loading":"lazy","width":"auto","height":"auto","id":""},"img":{"id":"632ca01585cf323fdd614a81"},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"266c221d-e014-0dc0-15a6-81e9ad2e0263","type":"Block","tag":"div","classes":["67a655d2-2c0f-837d-4420-e36e24bfdb13"],"children":["0612af0a-6b87-9cef-ee31-3427f948be1b"],"data":{"search":{"exclude":false},"xattr":[{"name":"data-ms-auth-connected-text","value":"Disconnect Dribbble"}],"text":true,"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"0612af0a-6b87-9cef-ee31-3427f948be1b","text":true,"v":"Continue with Dribbble"},{"_id":"266c221d-e014-0dc0-15a6-81e9ad2e0264","type":"Block","tag":"div","classes":["14420a4a-6592-ac3a-3c7f-530cba49272d"],"children":["1775afe4-f580-26c8-04bf-0dd2a593ca9c"],"data":{"tag":"div","xattr":[{"name":"data-ms-auth-disconnect","value":"true"}],"attr":{"id":""},"search":{"exclude":false},"visibility":{"conditions":[]},"text":false}},{"_id":"1775afe4-f580-26c8-04bf-0dd2a593ca9c","type":"Image","tag":"img","classes":["7dee09b5-aeae-95bb-58b1-768f8f8d9435"],"children":[],"data":{"attr":{"src":"https://cdn.prod.website-files.com/632c941ea9199f8985f3fd52/6331f8b4b515a6328c67f9ec_close_black_24dp.svg","loading":"lazy","width":"auto","height":"auto","id":""},"img":{"id":"6331f8b4b515a6328c67f9ec"},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}}],"styles":[{"_id":"b78c2541-8473-a75b-a297-efaf65e93385","fake":false,"type":"class","name":"Social Btn","namespace":"","comb":"","styleLess":"position: relative; width: 100%; margin-bottom: 10px; padding-top: 12px; padding-right: 40px; padding-bottom: 12px; padding-left: 15px; border-top-style: solid; border-top-width: 1px; border-top-color: hsla(240, 15.31%, 88.19%, 1.00); border-right-style: solid; border-right-width: 1px; border-right-color: hsla(240, 15.31%, 88.19%, 1.00); border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: hsla(240, 15.31%, 88.19%, 1.00); border-left-style: solid; border-left-width: 1px; border-left-color: hsla(240, 15.31%, 88.19%, 1.00); border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; box-shadow: 0 1px 2px 0 hsla(240, 15.31%, 88.19%, 0.50); transition-property: border-color, box-shadow; transition-duration: 200ms, 200ms; transition-timing-function: ease, ease; color: hsla(0, 0.00%, 0.00%, 1.00); font-size: 15px; font-weight: 300; text-decoration: none;","variants":{"main_focus":{"styleLess":"border-top-style: solid; border-top-width: 1px; border-top-color: hsla(0, 0.00%, 0.00%, 1.00); border-right-style: solid; border-right-width: 1px; border-right-color: hsla(0, 0.00%, 0.00%, 1.00); border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: hsla(0, 0.00%, 0.00%, 1.00); border-left-style: solid; border-left-width: 1px; border-left-color: hsla(0, 0.00%, 0.00%, 1.00);"},"main_placeholder":{"styleLess":"color: hsla(0, 0.00%, 43.33%, 1.00);"},"main_hover":{"styleLess":"border-top-color: hsla(215.55555555555554, 19.71%, 26.86%, 1.00); border-right-color: hsla(215.55555555555554, 19.71%, 26.86%, 1.00); border-bottom-color: hsla(215.55555555555554, 19.71%, 26.86%, 1.00); border-left-color: hsla(215.55555555555554, 19.71%, 26.86%, 1.00); box-shadow: none /* 0 1px 4px 0 rgba(220, 220, 229, 0.9) */;"}},"children":["b8cab70c-aadd-6f9a-f4e7-12c5cb42c48e","c36ff424-1c20-d36b-5eeb-7501ac1bd0d2","e63577dc-f58b-32d9-fdca-44c357fe3cea","23e62748-e1af-8eae-84ad-b7304de22669","8f74f914-9676-dc2b-de11-d828cdf07ff5","f4ae05b1-d9ae-3f37-d7d9-5d08e7299c83","21ad250c-9645-3884-97f3-87ec7f93b1e7"],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"e63577dc-f58b-32d9-fdca-44c357fe3cea","fake":false,"type":"class","name":"Dribbble","namespace":"","comb":"&","styleLess":"","variants":{"main_hover":{"styleLess":"border-top-color: #ea4c89; border-right-color: #ea4c89; border-bottom-color: #ea4c89; border-left-color: #ea4c89;"}},"children":["1813b475-5a5e-d5e9-0174-d34b0ab6264f"],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"b78c2541-8473-a75b-a297-efaf65e93386","fake":false,"type":"class","name":"Social Content","namespace":"","comb":"","styleLess":"display: flex; align-items: center; grid-column-gap: 20px;","variants":{},"children":["0bf4e500-4b1f-48bf-7d37-1a1df66f9b1f"],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"3e7f4474-bee1-03cf-9e0e-915f224e02a6","fake":false,"type":"class","name":"Social Image","namespace":"","comb":"","styleLess":"width: 24px;","variants":{},"children":["6eb2f25c-d30c-6a9e-f26a-f074924a95b7"],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"67a655d2-2c0f-837d-4420-e36e24bfdb13","fake":false,"type":"class","name":"Social Text","namespace":"","comb":"","styleLess":"","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"14420a4a-6592-ac3a-3c7f-530cba49272d","fake":false,"type":"class","name":"Disconnect Link","namespace":"","comb":"","styleLess":"position: absolute; left: auto; top: 0%; right: 0%; bottom: 0%; padding-top: 13px; padding-right: 13px; padding-bottom: 13px; padding-left: 13px; text-align: right; text-decoration: underline;","variants":{"main_hover":{"styleLess":"color: hsla(0, 0.00%, 0.00%, 1.00);"}},"children":[],"selector":null},{"_id":"7dee09b5-aeae-95bb-58b1-768f8f8d9435","fake":false,"type":"class","name":"Disconnect Image","namespace":"","comb":"","styleLess":"width: 16px;","variants":{},"children":["1e57bc78-a858-b584-6806-411010152d9b"],"createdBy":"572e16b6f586648f39f82496","selector":null}],"assets":[{"cdnUrl":"https://cdn.prod.website-files.com/632c941ea9199f8985f3fd52/632ca01585cf323fdd614a81_dribbble-svgrepo-com.svg","siteId":"632c941ea9199f8985f3fd52","width":512,"isHD":false,"height":512,"fileName":"632ca01585cf323fdd614a81_dribbble-svgrepo-com.svg","createdOn":"2022-09-22T17:49:09.832Z","origFileName":"dribbble-svgrepo-com.svg","fileHash":"e7f954cb0117d95685f0a42f40f83f9e","variants":[],"mimeType":"image/svg+xml","s3Url":"https://s3.amazonaws.com/webflow-prod-assets/632c941ea9199f8985f3fd52/632ca01585cf323fdd614a81_dribbble-svgrepo-com.svg","thumbUrl":"https://cdn.prod.website-files.com/632c941ea9199f8985f3fd52/632ca01585cf323fdd614a81_dribbble-svgrepo-com.svg","_id":"632ca01585cf323fdd614a81","updatedOn":"2022-09-22T19:51:31.838Z","fileSize":2253},{"cdnUrl":"https://cdn.prod.website-files.com/632c941ea9199f8985f3fd52/6331f8b4b515a6328c67f9ec_close_black_24dp.svg","siteId":"632c941ea9199f8985f3fd52","width":24,"isHD":false,"height":24,"fileName":"6331f8b4b515a6328c67f9ec_close_black_24dp.svg","createdOn":"2022-09-26T19:08:36.466Z","origFileName":"close_black_24dp.svg","fileHash":"2575acf5ecbc8159c6710f6a6c525c82","variants":[],"mimeType":"image/svg+xml","s3Url":"https://s3.amazonaws.com/webflow-prod-assets/632c941ea9199f8985f3fd52/6331f8b4b515a6328c67f9ec_close_black_24dp.svg","thumbUrl":"https://cdn.prod.website-files.com/632c941ea9199f8985f3fd52/6331f8b4b515a6328c67f9ec_close_black_24dp.svg","_id":"6331f8b4b515a6328c67f9ec","updatedOn":"2022-09-27T12:08:27.397Z","fileSize":430}],"ix1":[],"ix2":{"interactions":[],"events":[],"actionLists":[]}},"meta":{"unlinkedSymbolCount":0,"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0}}

Klonen in Webflow

Kopieer component

{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"266c221d-e014-0dc0-15a6-81e9ad2e0260","type":"Link","tag":"a","classes":["b78c2541-8473-a75b-a297-efaf65e93385","e63577dc-f58b-32d9-fdca-44c357fe3cea"],"children":["266c221d-e014-0dc0-15a6-81e9ad2e0261"],"data":{"search":{"exclude":false},"xattr":[{"name":"data-ms-auth-provider","value":"dribbble"}],"block":"inline","attr":{"id":""},"visibility":{"conditions":[]},"button":false,"link":{"mode":"external","url":"#"}}},{"_id":"266c221d-e014-0dc0-15a6-81e9ad2e0261","type":"Block","tag":"div","classes":["b78c2541-8473-a75b-a297-efaf65e93386"],"children":["266c221d-e014-0dc0-15a6-81e9ad2e0262","266c221d-e014-0dc0-15a6-81e9ad2e0263","266c221d-e014-0dc0-15a6-81e9ad2e0264"],"data":{"tag":"div","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"text":false}},{"_id":"266c221d-e014-0dc0-15a6-81e9ad2e0262","type":"Image","tag":"img","classes":["3e7f4474-bee1-03cf-9e0e-915f224e02a6"],"children":[],"data":{"attr":{"src":"https://cdn.prod.website-files.com/632c941ea9199f8985f3fd52/632ca01585cf323fdd614a81_dribbble-svgrepo-com.svg","loading":"lazy","width":"auto","height":"auto","id":""},"img":{"id":"632ca01585cf323fdd614a81"},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"266c221d-e014-0dc0-15a6-81e9ad2e0263","type":"Block","tag":"div","classes":["67a655d2-2c0f-837d-4420-e36e24bfdb13"],"children":["0612af0a-6b87-9cef-ee31-3427f948be1b"],"data":{"search":{"exclude":false},"xattr":[{"name":"data-ms-auth-connected-text","value":"Disconnect Dribbble"}],"text":true,"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"0612af0a-6b87-9cef-ee31-3427f948be1b","text":true,"v":"Continue with Dribbble"},{"_id":"266c221d-e014-0dc0-15a6-81e9ad2e0264","type":"Block","tag":"div","classes":["14420a4a-6592-ac3a-3c7f-530cba49272d"],"children":["1775afe4-f580-26c8-04bf-0dd2a593ca9c"],"data":{"tag":"div","xattr":[{"name":"data-ms-auth-disconnect","value":"true"}],"attr":{"id":""},"search":{"exclude":false},"visibility":{"conditions":[]},"text":false}},{"_id":"1775afe4-f580-26c8-04bf-0dd2a593ca9c","type":"Image","tag":"img","classes":["7dee09b5-aeae-95bb-58b1-768f8f8d9435"],"children":[],"data":{"attr":{"src":"https://cdn.prod.website-files.com/632c941ea9199f8985f3fd52/6331f8b4b515a6328c67f9ec_close_black_24dp.svg","loading":"lazy","width":"auto","height":"auto","id":""},"img":{"id":"6331f8b4b515a6328c67f9ec"},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}}],"styles":[{"_id":"b78c2541-8473-a75b-a297-efaf65e93385","fake":false,"type":"class","name":"Social Btn","namespace":"","comb":"","styleLess":"position: relative; width: 100%; margin-bottom: 10px; padding-top: 12px; padding-right: 40px; padding-bottom: 12px; padding-left: 15px; border-top-style: solid; border-top-width: 1px; border-top-color: hsla(240, 15.31%, 88.19%, 1.00); border-right-style: solid; border-right-width: 1px; border-right-color: hsla(240, 15.31%, 88.19%, 1.00); border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: hsla(240, 15.31%, 88.19%, 1.00); border-left-style: solid; border-left-width: 1px; border-left-color: hsla(240, 15.31%, 88.19%, 1.00); border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; box-shadow: 0 1px 2px 0 hsla(240, 15.31%, 88.19%, 0.50); transition-property: border-color, box-shadow; transition-duration: 200ms, 200ms; transition-timing-function: ease, ease; color: hsla(0, 0.00%, 0.00%, 1.00); font-size: 15px; font-weight: 300; text-decoration: none;","variants":{"main_focus":{"styleLess":"border-top-style: solid; border-top-width: 1px; border-top-color: hsla(0, 0.00%, 0.00%, 1.00); border-right-style: solid; border-right-width: 1px; border-right-color: hsla(0, 0.00%, 0.00%, 1.00); border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: hsla(0, 0.00%, 0.00%, 1.00); border-left-style: solid; border-left-width: 1px; border-left-color: hsla(0, 0.00%, 0.00%, 1.00);"},"main_placeholder":{"styleLess":"color: hsla(0, 0.00%, 43.33%, 1.00);"},"main_hover":{"styleLess":"border-top-color: hsla(215.55555555555554, 19.71%, 26.86%, 1.00); border-right-color: hsla(215.55555555555554, 19.71%, 26.86%, 1.00); border-bottom-color: hsla(215.55555555555554, 19.71%, 26.86%, 1.00); border-left-color: hsla(215.55555555555554, 19.71%, 26.86%, 1.00); box-shadow: none /* 0 1px 4px 0 rgba(220, 220, 229, 0.9) */;"}},"children":["b8cab70c-aadd-6f9a-f4e7-12c5cb42c48e","c36ff424-1c20-d36b-5eeb-7501ac1bd0d2","e63577dc-f58b-32d9-fdca-44c357fe3cea","23e62748-e1af-8eae-84ad-b7304de22669","8f74f914-9676-dc2b-de11-d828cdf07ff5","f4ae05b1-d9ae-3f37-d7d9-5d08e7299c83","21ad250c-9645-3884-97f3-87ec7f93b1e7"],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"e63577dc-f58b-32d9-fdca-44c357fe3cea","fake":false,"type":"class","name":"Dribbble","namespace":"","comb":"&","styleLess":"","variants":{"main_hover":{"styleLess":"border-top-color: #ea4c89; border-right-color: #ea4c89; border-bottom-color: #ea4c89; border-left-color: #ea4c89;"}},"children":["1813b475-5a5e-d5e9-0174-d34b0ab6264f"],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"b78c2541-8473-a75b-a297-efaf65e93386","fake":false,"type":"class","name":"Social Content","namespace":"","comb":"","styleLess":"display: flex; align-items: center; grid-column-gap: 20px;","variants":{},"children":["0bf4e500-4b1f-48bf-7d37-1a1df66f9b1f"],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"3e7f4474-bee1-03cf-9e0e-915f224e02a6","fake":false,"type":"class","name":"Social Image","namespace":"","comb":"","styleLess":"width: 24px;","variants":{},"children":["6eb2f25c-d30c-6a9e-f26a-f074924a95b7"],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"67a655d2-2c0f-837d-4420-e36e24bfdb13","fake":false,"type":"class","name":"Social Text","namespace":"","comb":"","styleLess":"","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"14420a4a-6592-ac3a-3c7f-530cba49272d","fake":false,"type":"class","name":"Disconnect Link","namespace":"","comb":"","styleLess":"position: absolute; left: auto; top: 0%; right: 0%; bottom: 0%; padding-top: 13px; padding-right: 13px; padding-bottom: 13px; padding-left: 13px; text-align: right; text-decoration: underline;","variants":{"main_hover":{"styleLess":"color: hsla(0, 0.00%, 0.00%, 1.00);"}},"children":[],"selector":null},{"_id":"7dee09b5-aeae-95bb-58b1-768f8f8d9435","fake":false,"type":"class","name":"Disconnect Image","namespace":"","comb":"","styleLess":"width: 16px;","variants":{},"children":["1e57bc78-a858-b584-6806-411010152d9b"],"createdBy":"572e16b6f586648f39f82496","selector":null}],"assets":[{"cdnUrl":"https://cdn.prod.website-files.com/632c941ea9199f8985f3fd52/632ca01585cf323fdd614a81_dribbble-svgrepo-com.svg","siteId":"632c941ea9199f8985f3fd52","width":512,"isHD":false,"height":512,"fileName":"632ca01585cf323fdd614a81_dribbble-svgrepo-com.svg","createdOn":"2022-09-22T17:49:09.832Z","origFileName":"dribbble-svgrepo-com.svg","fileHash":"e7f954cb0117d95685f0a42f40f83f9e","variants":[],"mimeType":"image/svg+xml","s3Url":"https://s3.amazonaws.com/webflow-prod-assets/632c941ea9199f8985f3fd52/632ca01585cf323fdd614a81_dribbble-svgrepo-com.svg","thumbUrl":"https://cdn.prod.website-files.com/632c941ea9199f8985f3fd52/632ca01585cf323fdd614a81_dribbble-svgrepo-com.svg","_id":"632ca01585cf323fdd614a81","updatedOn":"2022-09-22T19:51:31.838Z","fileSize":2253},{"cdnUrl":"https://cdn.prod.website-files.com/632c941ea9199f8985f3fd52/6331f8b4b515a6328c67f9ec_close_black_24dp.svg","siteId":"632c941ea9199f8985f3fd52","width":24,"isHD":false,"height":24,"fileName":"6331f8b4b515a6328c67f9ec_close_black_24dp.svg","createdOn":"2022-09-26T19:08:36.466Z","origFileName":"close_black_24dp.svg","fileHash":"2575acf5ecbc8159c6710f6a6c525c82","variants":[],"mimeType":"image/svg+xml","s3Url":"https://s3.amazonaws.com/webflow-prod-assets/632c941ea9199f8985f3fd52/6331f8b4b515a6328c67f9ec_close_black_24dp.svg","thumbUrl":"https://cdn.prod.website-files.com/632c941ea9199f8985f3fd52/6331f8b4b515a6328c67f9ec_close_black_24dp.svg","_id":"6331f8b4b515a6328c67f9ec","updatedOn":"2022-09-27T12:08:27.397Z","fileSize":430}],"ix1":[],"ix2":{"interactions":[],"events":[],"actionLists":[]}},"meta":{"unlinkedSymbolCount":0,"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0}}

Browser niet ondersteund. Gebruik
CC Chrome of SS Safari.

Over dit onderdeel

AI-gegenereerd

Beschrijving van onderdeel (gegenereerd door AI)

The Dribbble Social Login component allows users to authenticate their accounts using Dribbble, providing a seamless login experience for websites and applications.

Belangrijkste kenmerken:

Easy integration for Dribbble authentication
Includes a disconnect option for user convenience
Responsive design suitable for various devices
Customizable styles to match website branding

Ontwerpelementen:

Flexbox layout for alignment of icons and text
Rounded borders and subtle shadows for a modern look
Color scheme that highlights the Dribbble brand

Potentiële gebruikssituaties:

Creative portfolios looking to integrate social logins
Design agencies wanting to streamline client access
E-commerce sites targeting creative professionals
Community platforms for designers and artists

Conclusion: The Dribbble Social Login component is a versatile and user-friendly solution for websites aiming to enhance user engagement through social authentication.

Bouwen

Begin met het bouwen van je dromen

Memberstack is 100% gratis totdat u klaar bent om te lanceren - dus waar wacht u nog op? Maak je eerste app en begin vandaag nog.

Vergelijkbare componenten

Spotify Social Login

Ga verder met LinkedIn

Doorgaan met Spotify